你真的需要那个插件吗？您可以为该scrollTop属性设置动画：

$("#nav ul li a[href^='#']").on('click', function(e) {

   // prevent default anchor click behavior
   e.preventDefault();

   // store hash
   var hash = this.hash;

   // animate
   $('html, body').animate({
       scrollTop: $(hash).offset().top
     }, 300, function(){

       // when done, add hash to url
       // (default click behaviour)
       window.location.hash = hash;
     });

});

小提琴

如果你有一个固定的导航栏，你将需要这样的东西。

从以上最佳答案和评论中汲取...

$(".bs-js-navbar-scrollspy li a[href^='#']").on('click', function(event) {
  var target = this.hash;

  event.preventDefault();

  var navOffset = $('#navbar').height();

  return $('html, body').animate({
    scrollTop: $(this.hash).offset().top - navOffset
  }, 300, function() {
    return window.history.pushState(null, null, target);
  });
});

首先，为了防止“未定义”错误，target在调用 之前将散列存储到变量，然后preventDefault()引用该存储值，如 pupadupa 所述。

下一个。您不能使用，window.location.hash = target因为它同时而不是单独设置 url 和位置。您最终将在元素的开头找到位置，该元素的 id 与 href... 匹配，但被固定的顶部导航栏覆盖。

为了解决这个问题，您将 scrollTop 值设置为目标的垂直滚动位置值减去固定导航栏的高度。直接针对该值可保持平滑滚动，而不是事后添加调整，并产生看起来不专业的抖动。

您会注意到 url 没有改变。要设置它，请改用return window.history.pushState(null, null, target);手动将 url 添加到历史堆栈中。

完毕！

其他注意事项：

1) 使用该.on方法是最新的（截至 2015 年 1 月）jquery 方法，它比.bindor更好.live，甚至.click原因我会留给你找出来。

2) navOffset 值可以在函数内部或外部，但您可能希望它在外部，因为您很可能会引用其他函数/DOM 操作的垂直空间。但我把它留在里面，使它整齐地成为一个功能。

$("#YOUR-BUTTON").on('click', function(e) {
   e.preventDefault();
   $('html, body').animate({
        scrollTop: $("#YOUR-TARGET").offset().top
     }, 300);
});

// styles.css
html {
    scroll-behavior: smooth
}

来源：https : //www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2

如果您下载了 jquery 缓动插件（检查出来），那么您只需要将其添加到您的 main.js 文件中：

$('a.smooth-scroll').on('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top + 20
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
});

并且不要忘记将平滑滚动类添加到您的 a 标签中，如下所示：

 <li><a href="#about" class="smooth-scroll">About Us</a></li>