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

使用jQuery平滑滚动到ID

2 个答案: