使用jQuery平滑滚动到ID

时间:2017-12-08 14:49:22

标签: jquery html

在使用我的导航栏导航到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;
      });
    }

2 个答案:

答案 0 :(得分: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函数中添加上面的内容,所有以#开头的链接都会有一个动画滚动到目标。

答案 1 :(得分:0)

也许尝试指定缓动选项。

这样的事情:

$("#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);
    });
});