JS实现URL带hash锚点跳转后页面自动回顶问题排查求助

问题原因排查 #

• 语法错误：window.location.hash返回值自带#前缀，直接传入document.getElementById()无法匹配到对应元素，你的滚动逻辑实际没有正常执行，滚动到锚点是浏览器默认行为触发的。
• 时机错误：DOMContentLoaded 触发时仅DOM树加载完成，图片、字体、异步渲染的区块等资源还未加载，此时页面高度不稳定，后续资源加载完成后页面重排，会导致已经滚动的位置被重置回顶部。
• 浏览器默认行为冲突：浏览器原生会在页面全量加载完成后自动执行锚点滚动，和手动写的滚动逻辑冲突，两个滚动先后执行就会出现先滚到目标、再被重置位置的问题。
• 代码逻辑疏漏：你计算了减去头部高度的偏移量a，但实际滚动时没有使用这个变量，还是用了原始的offset，如果你的头部是固定定位的，会导致滚动位置不准。

修复方案 #

修改后的代码如下：

// 禁用浏览器默认的滚动恢复，避免历史记录干扰
if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual';
}

window.addEventListener('load', () => {
  // setupScrolling();
  setupTitle();
  if (window.location.hash) {
    // 移除hash前缀的#再获取目标元素
    const targetId = window.location.hash.slice(1);
    const element = document.getElementById(targetId);
    if (element) {
      const headerHeight = document.querySelector('header')?.offsetHeight || 0;
      const targetScrollTop = element.offsetTop - headerHeight;
      // 短延时确保所有页面渲染完成，规避部分浏览器的执行顺序问题
      setTimeout(() => {
        window.scroll({
          top: targetScrollTop,
          behavior: 'smooth'
        });
      }, 0);
    }
  }
});

如果你使用的是Vue、React等单页应用框架，需要额外监听路由变化事件，在路由切换完成后再执行上述滚动逻辑，避免路由跳转后hash变化不触发滚动的问题。

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