纯JavaScript实现hash锚点滚动时如何添加顶部偏移间距

你当前直接修改location.hash的原生实现，默认会把锚点元素对齐到视口最顶部，无法预留顶部间距。要实现和jQuery [target].offset().top - 160完全一致的偏移效果，有两种可落地的实现方案：

方案1：CSS全局适配（成本最低，推荐） #

不需要修改现有JS逻辑，只要给所有带id的锚点元素加一行CSS属性，浏览器默认的锚点跳转就会自动预留顶部间距：

[id] {
  scroll-margin-top: 160px;
}

说明：scroll-margin-top是原生CSS标准属性，兼容Chrome、Firefox、Edge等所有现代浏览器，属性值就是你需要预留的顶部间距，可根据固定导航栏高度自行调整。加完这段样式后，你原来写的scrollTo函数不需要任何改动就能实现160px偏移效果。

方案2：JS手动控制滚动位置（兼容老旧浏览器） #

如果需要兼容不支持scroll-margin-top的老旧浏览器，可以重写你的scrollTo方法，手动计算位置后调用滚动API：

function scrollTo(hash) {
  const target = document.getElementById(hash);
  if (!target) return;
  // 计算元素距文档顶部的绝对位置，和jQuery offset().top 结果一致
  const targetTop = target.getBoundingClientRect().top + window.pageYOffset;
  // 减去160px预留间距
  const scrollPosition = targetTop - 160;
  // 执行滚动，behavior设为smooth是平滑滚动，要瞬间跳转改为auto即可
  window.scrollTo({
    top: scrollPosition,
    behavior: 'smooth'
  });
  // 同步更新地址栏hash，且不触发浏览器默认滚动
  history.replaceState(null, '', `#${hash}`);
}

实现注意点 #

• 计算元素绝对偏移量时，getBoundingClientRect().top + window.pageYOffset的计算结果和jQuery的offset().top完全等价，不存在数值偏差
• 如果不需要平滑滚动效果，把scrollTo参数里的behavior字段值改为'auto'即可，效果和原生修改location.hash的瞬间跳转完全一致
• 用history.replaceState更新地址栏hash，不会触发浏览器默认的锚点跳转逻辑，不会覆盖你手动计算的滚动位置
• 160px的偏移值可以根据页面顶部固定导航栏的实际高度灵活调整

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