使用jQuery平滑滚动到ID

Question

使用导航栏导航至ID时，难以实现平滑滚动功能。 取而代之的是，它进行默认的跳转，这有点令人费解。

我对jQuery缺乏经验，因此朝正确方向的任何指针将不胜感激。

我已经尝试过实现此功能，正如我所说的那样，它是“跳跃”而不是滚动。

HTML

<li>
  <a href="#popular">Most Popular</a>
</li>
<div class="col-sm-12" id="popular">
<h3><i aria-hidden="true" class="fa fa-fire"></i> Most Popular</h3>
</div>

jQuery的

$(document).ready(function() {
  $("#popular").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('col-sm-12').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {
        window.location.hash = hash;
      });
    }

Answer 1

    $(document).ready(function(){
  $('a[href^="#"]').on('click',function (e) {
      e.preventDefault();

      var target = this.hash;
      var $target = $(target);

      $('html, body').stop().animate({
          'scrollTop': $target.offset().top
      }, 900, 'swing', function () {
          window.location.hash = target;
      });
  });
});

将以上内容添加到jQuery文件的$（document）.ready函数中，所有以＃开头的链接将具有到目标的动画滚动。

Answer 2

也许尝试指定宽松选项。

像这样：

$("#popular").click(function() {
    $('html, body').animate({
        scrollTop: $("#popular").offset().top
    }, 800, 'linear');
});

要么：

$(document).ready(function () {
    $("#popular").on('click', function (e) {
        $('.col-sm-12').animate({
            scrollTop: $(this).offset().top
        }, 800);
    });
});