固定导航场景下jQuery滚动到元素位置出现跳转问题求助

嘿，这个坑我之前也踩过！你遇到的“先滚动到目标上方，然后突然向下跳转”的问题，罪魁祸首就是动画回调里的window.location.hash = target这一行。

问题根源解释 #

当你用JS动画把页面滚动到$target.offset().top -50的位置后，立刻设置window.location.hash = target会触发浏览器原生的锚点跳转行为——浏览器会自动把页面滚动到锚点元素的默认顶部位置（也就是没减50的位置），直接覆盖了你刚才动画做的滚动操作，所以才会出现“跳一下”的现象。

两种解决方案，按需选择 #

方案1：保留URL锚点（推荐用CSS实现）

如果你希望URL里能显示锚点（方便用户刷新页面回到对应位置），最稳妥的方法是用CSS的scroll-margin-top属性，让浏览器原生的锚点跳转自动留出导航栏的高度：

1. 给所有锚点目标元素加一个通用类（比如anchor-target），然后设置CSS：

.anchor-target {
  scroll-margin-top: 50px; /* 和你导航栏的高度一致 */
}

2. 修改JS代码，去掉-50的偏移量，因为浏览器会自动处理：

$(".anchor").each(function () {
  $(this).click(function(e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    $('html, body').animate({
      scrollTop: $target.offset().top
    }, 2000, function () {
      window.location.hash = target; // 现在设置hash不会跳了，浏览器已经考虑了scroll-margin-top
    });
  });
})

方案2：不需要URL锚点，直接去掉hash设置

如果不在乎URL里有没有锚点，那最简单的办法就是删掉动画回调里的window.location.hash = target这一行，这样动画结束后就不会触发浏览器的原生跳转，页面会稳稳停在你设置的$target.offset().top -50位置：

$(".anchor").each(function () {
  $(this).click(function(e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    $('html, body').animate({
      scrollTop: $target.offset().top -50
    }, 2000);
    // 去掉window.location.hash这一行
  });
})

备选方案：JS强行修正滚动位置（不推荐）

如果因为某些原因不能用CSS也不想去掉hash，那可以在设置hash后立刻把滚动位置拉回动画后的位置，但这个方法可能在部分浏览器里有闪烁：

$(".anchor").each(function () {
  $(this).click(function(e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    var finalScrollTop = $target.offset().top -50;
    $('html, body').animate({
      scrollTop: finalScrollTop
    }, 2000, function () {
      window.location.hash = target;
      // 强制把滚动位置拉回目标值
      $('html, body').scrollTop(finalScrollTop);
    });
  });
})

总结 #

核心矛盾就是JS动画的手动滚动和浏览器原生锚点滚动的冲突，优先推荐用CSS的scroll-margin-top方案，既保留了锚点功能，又避免了JS的兼容性问题~

内容的提问来源于stack exchange，提问作者Lion Dirty