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

我正在使用导航栏固定屏幕最大宽度＆lt; 1000px。
导航栏的高度为60px。因此，如果max-with＆lt;则向后移动60px。 1000像素。

所有这一切都很好，但我的问题是，只有当视口大于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);

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

平滑滚动奇怪地跳跃

1 个答案: