单击滚动到元素答案

【问题标题】：on click scroll to element单击滚动到元素
【发布时间】：2016-08-27 18:38:41
【问题描述】：

您好，我有一个问题。我需要在单击时从锚点滚动到元素，但出现错误：

语法错误：属性列表后缺少 }

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;
    });

});

锚点在 WP 导航菜单中

【问题讨论】：

您的代码应该正常工作。在某些未封闭的事物之前，您有一些行。控制台是您的朋友。查看导致错误的行号。（或者使用更好的 IDE - 代码/编辑器，将立即显示这些错误。）
scrollT...ment.js（第 7 行，第 44 列）
scrollTop: $( $(this).attr('href') )element.offset().top 这是什么？这是您实际使用的代码还是问题评论？
这是我最后一次复制/粘贴日志错误。 'element.offset' 是我以前试图获得脚本的功能。忘记我会改变
在下面添加了一个示例。现在应该可以正常工作了

标签： jquery html css scroll

【解决方案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 会得到他的奖励。