JavaScript平滑滚动搭配scroll-margin-top出现末尾跳转，该如何解决？

问题背景 #

在实现锚点平滑滚动时，为目标元素设置了scroll-margin-top用于偏移滚动位置，但配合jQuery的平滑滚动函数使用时，滚动结束阶段会出现明显跳转。相关代码如下：

CSS代码 #

.target-section {
  scroll-margin-top: 6rem; /* 任意偏移值 */
}

JavaScript平滑滚动函数 #

var ssSmoothScroll = function () {
  $('a[href^="#"], area[href^="#"]').on('click', function (e) {
    var target = $($(this).attr('href'));
    if (target.length) {
      e.preventDefault();
      $('html, body').stop().animate({
        scrollTop: target.offset().top
      }, cfg.scrollDuration, 'swing', function () {
        window.location.hash = target.attr('id');
      });
    }
  });
};

问题原因 #

动画结束后设置window.location.hash时，浏览器会自动读取目标元素的scroll-margin-top属性，再次调整滚动位置，导致二次跳转。

解决方案 #

方法一：同步scrollTop与scroll-margin-top偏移 #

计算滚动位置时直接减去scroll-margin-top的值，让动画结束后的hash设置触发的默认偏移刚好抵消，避免跳转：

var ssSmoothScroll = function () {
  $('a[href^="#"], area[href^="#"]').on('click', function (e) {
    var target = $($(this).attr('href'));
    if (target.length) {
      e.preventDefault();
      // 获取目标元素的scroll-margin-top数值
      var scrollMargin = parseInt(window.getComputedStyle(target[0]).scrollMarginTop);
      // 计算最终滚动位置：目标top减去偏移量
      var finalPosition = target.offset().top - scrollMargin;
      
      $('html, body').stop().animate({
        scrollTop: finalPosition
      }, cfg.scrollDuration, 'swing', function () {
        window.location.hash = target.attr('id');
      });
    }
  });
};

方法二：用history.replaceState设置hash，避免默认滚动 #

使用history.replaceState修改URL hash，不会触发浏览器的默认滚动行为，从根源解决跳转问题：

var ssSmoothScroll = function () {
  $('a[href^="#"], area[href^="#"]').on('click', function (e) {
    var target = $($(this).attr('href'));
    if (target.length) {
      e.preventDefault();
      $('html, body').stop().animate({
        scrollTop: target.offset().top
      }, cfg.scrollDuration, 'swing', function () {
        // 替换hash但不触发滚动
        history.replaceState(null, null, '#' + target.attr('id'));
      });
    }
  });
};

方法三：使用原生CSS平滑滚动（推荐） #

现代浏览器支持原生平滑滚动，无需JavaScript即可实现无跳转的效果，代码更简洁可靠：

html {
  scroll-behavior: smooth; /* 开启全局平滑滚动 */
}
.target-section {
  scroll-margin-top: 6rem; /* 设置滚动偏移 */
}

直接使用原生特性，浏览器会自动处理平滑过渡和偏移，完全不会出现跳转问题。

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