jQuery利用平滑滚动

Question

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

jQuery scroll to element

Smooth scroll anchor 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>