javascript - 平滑滚动会奇怪地跳跃

Question

$(function() {$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top
    }, 1000);
    if (target.length <= 1000) {
      $('html,body').animate({
        scrollTop: target.offset().top - 60
      }, 1000);
    };
    return false;
  }
}});});

我正在使用一个固定的导航栏，屏幕最大宽度 < 1000px。
导航栏的高度为 60px。因此，如果 max-with < 1000px，则动画会向后退 60px。

所有这些工作正常，但我的问题是，只有当视口(viewport)大于 1000px 时，页面才会奇怪地跳转。

Answer 1

我认为问题在于您没有阻止默认的点击事件。这意味着浏览器会跳转到您想要的#id(因为这是默认的浏览器行为)，然后平滑滚动会从头开始触发动画，从而实现快速跳转。

要修复它，只需使用 preventDefault(); 阻止默认事件；

简单示例:

$('selector').click(function(e) {
    e.preventDefault();
    // your code
});

固定代码:

$(function() {
    $('a[href*=#]:not([href=#])').click(function(e) {e.preventDefault(); {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                if (matchMedia('only screen and (max-width: 1000px)').matches) {
                    $('html,body').animate({
                        scrollTop: target.offset().top - 60
                    }, 1000);

                    window.location.hash = '#' + target[0].id;

                    return false;
                }
              }
            }
          }
    });
});