jQuery利用平滑滚动

Question

我在使网页使用平滑滚动方面遇到一些困难。 我在页面顶部有一个导航栏，上面有4个选项。 每个选项对应于页面下方的部分。 我希望能够在导航栏中单击那些项，并向下平滑滚动至其相应部分。 我尝试利用以下两个问题（以及其他一些在线资源！），但似乎无法正常工作。 提供的任何帮助将不胜感激！ 下面是代码的摘要版本

jQuery滚动到元素

平滑滚动锚点jQuery

的HTML

<ul id="navbar">
            <li><a class="about" href="#about">ABOUT</a></li>
            <li><a class="shop" href="#shop">SHOP</a></li>
            <li><a class= "featured" href="#featured">FEATURED</a></li>
            <li><a class="updates" href="#updates">UPDATES</a></li>
        </ul>

<div id="handcrafted"></div>
<div id="shop"></div>
<div id="featured"></div>
<div id="updates"></div>

JS

$('.about').click( function() {
     $('html, body').animate({
          scrollTop: $('#about').offset().top
     }, 400);
});


$('.shop').click( function() {
     $('html, body').animate({
          scrollTop: $('#shop').offset().top
     }, 400);
});



$('.featured').click( function() {
     $('html, body').animate({
          scrollTop: $('#featured').offset().top
     }, 400);
});



$('.updates').click( function() {
     $('html, body').animate({
          scrollTop: $('#updates').offset().top
     }, 400);
});

Answer 1

<div id="handcrafted"></div>应该是<div id="about"></div>

而且，如果您要使用<a> ，建议您一直添加e.preventDefault() ，除非您想要纯正的<a> 。

 $('a').click( function(e) { e.preventDefault() $('html').animate({ scrollTop: $($(this).attr('href')).offset().top }, 400); }); 

 div{ height: 50vh; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="navbar"> <li><a class="about" href="#about">ABOUT</a></li> <li><a class="shop" href="#shop">SHOP</a></li> <li><a class= "featured" href="#featured">FEATURED</a></li> <li><a class="updates" href="#updates">UPDATES</a></li> </ul> <div id="about">ABOUT</div> <div id="shop">SHOP</div> <div id="featured">FEATURED</div> <div id="updates">UPDATES</div>