javascript - 平滑滚动怪异地跳

$(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时，页面才会奇怪地跳转。

最佳答案

我认为问题在于您没有阻止默认的点击事件。这意味着浏览器跳转到您想要的#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);

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