JavaScript跨页面锚点平滑滚动异常，寻求可行解决方案

问题分析 #

• 同页面内锚点平滑滚动正常，但跨页面点击链接时，要么直接跳转无平滑效果，要么滚动位置偏差数百像素。
• 无法使用scroll-behavior: smooth，受限于页面轮播组件和Chromium的requestAnimationFrame已知bug。
• 原跨页面处理逻辑存在核心问题：跳转页面添加的DOMContentLoaded监听在新页面加载后不会生效（原页面上下文已销毁）；固定时长的setTimeout无法适配不同页面的加载速度；仅依赖getBoundingClientRect().top计算位置时未考虑当前页面滚动偏移，导致位置计算错误。

解决方案 #

核心思路：

• 同页面点击：拦截默认行为，直接执行平滑滚动。
• 跨页面点击：让浏览器正常跳转（保留URL中的hash），在目标页面（首页）加载完成后，读取URL hash并执行平滑滚动。

1. 通用平滑滚动函数 #

function smoothScrollTo(targetSelector, offset = 50) {
  const target = document.querySelector(targetSelector);
  if (!target) return;

  // 计算元素相对于文档顶部的准确位置（视口偏移 + 当前滚动距离 - 自定义偏移）
  const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset;
  
  window.scrollTo({
    top: targetPosition,
    behavior: 'smooth'
  });
}

2. 链接点击事件处理与页面加载后的hash检测 #

document.addEventListener('DOMContentLoaded', () => {
  // 处理所有导航锚点链接（匹配 href="/#xxx" 格式）
  document.querySelectorAll('a[href^="/#"]').forEach(link => {
    link.addEventListener('click', (e) => {
      const targetHash = link.getAttribute('href').replace('/', '');
      const isHomePage = window.location.pathname === '/' || window.location.pathname === '';

      if (isHomePage) {
        // 同页面跳转，拦截默认行为，执行平滑滚动
        e.preventDefault();
        smoothScrollTo(targetHash);
      }
      // 跨页面跳转时不拦截，让浏览器正常跳转并携带hash
    });
  });

  // 目标页面（首页）加载完成后，检查URL中的hash并执行平滑滚动
  const currentHash = window.location.hash;
  if (currentHash && currentHash.startsWith('#')) {
    // 等待所有资源（图片、轮播组件等）加载完成，确保元素尺寸计算准确
    window.addEventListener('load', () => {
      // 可选：重置初始滚动位置，避免浏览器自动跳转锚点导致突兀效果
      window.scrollTo(0, 0);
      // 延迟100ms执行，确保重置滚动的动作完成
      setTimeout(() => smoothScrollTo(currentHash), 100);
    });
  }
});

关键优化点 #

• 位置计算准确性：结合window.pageYOffset和getBoundingClientRect().top，确保元素位置相对于文档顶部的计算不受当前滚动状态影响。
• 页面加载时机：使用window.load而非DOMContentLoaded，等待所有资源加载完成后再执行滚动，避免因轮播、图片等未渲染导致的元素高度计算错误。
• 跨页面逻辑修正：将跨页面滚动的处理逻辑移至目标页面，利用URL hash传递目标锚点，避免原页面上下文销毁导致的监听失效问题。
• 避免固定延迟：移除固定时长的setTimeout，改用资源加载完成事件+短延迟确保滚动动作流畅。

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