点击后滚动到元素

Question

你好，我有一个问题。我需要在单击时从锚点滚动到元素，但是我遇到了错误:

SyntaxError: 属性列表后缺少 }

scrollTop: $( $(this).attr('href') )element.offset().top

/* jQuery scroll to element on click */

$(document).ready(function(){

    $('nav#site-navigation ul li').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 1000);
    return false;
    });

});

在WordPress导航菜单中，anchor指的是锚点。

- strava1

---

你的代码应该很好地运行。在之前的某些行中有未关闭的东西。控制台是你的朋友。看看抛出错误的行号。（或使用更好的IDE - 代码/编辑器，会立即显示这些错误。） - Roko C. Buljan

scrollT...ment.js（第7行，第44列） - strava1

这是什么？这是你实际使用的代码还是一个问题评论？scrollTop: $（$（this）.attr（'href'））element.offset（）。top - Roko C. Buljan

这是我的最后一份复制/粘贴日志错误。 'element.offset'是我之前尝试获取脚本功能的代码。忘记它，我会进行更改。 - strava1

现在已经添加了一个示例，应该可以正常工作了。 - Roko C. Buljan

Answer 1

<li>元素没有href属性！
请使用它的子元素<a>元素。

$(document).ready(function(){

    $('nav#site-navigation ul li a').click(function(evt) {
      evt.preventDefault();
      $('html, body').stop().animate({
        scrollTop: $( $(this).attr('href') ).offset().top
      }, 1000);
    });

});

nav{position:fixed;top:20px;}
.page{height:100vh;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation">
  <ul>
    <li><a href="#home">HOME</a></li>
    <li><a href="#about">ABOUT</a></li>
    <li><a href="#contact">CONTACT</a></li>
  </ul>
</nav>
<div id="home" class="page">HOME</div>
<div id="about" class="page">ABOUT</div>
<div id="contact" class="page">CONTACT</div>

此外，不要忘记使用 .stop() 来清除动画队列。

- Roko C. Buljan

---

如果这对您有帮助，请接受他的答案，以便关闭此问题并使Roko获得奖励。 - luissimo