Safari浏览器特定锚点链接跳转位置偏高400-500px问题求助

问题根因 #

Safari 14.x 版本存在两个已知的锚点滚动兼容问题：

1. 浏览器自带的默认锚点跳转逻辑优先级高于自定义滚动逻辑，且默认跳转时机早于布局完全稳定的时间点，会和你的自定义scrollTo逻辑冲突
2. 固定时长的setTimeout无法保证执行时页面布局完全稳定，若该锚点附近存在懒加载资源、异步渲染内容，100ms延迟执行时拿到的offsetTop仍不是最终渲染后的数值，且Safari的offsetTop计算在布局重排过程中会出现临时偏差

解决方案 #

直接替换原有的滚动Hook逻辑如下：

useEffect(() => {
  const anchor = router.asPath.split('#')[1];
  if (!anchor) return;

  // 禁用浏览器默认锚点跳转与滚动恢复，避免逻辑冲突
  if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
  }

  const scrollToAnchor = () => {
    const node = document.getElementById(anchor);
    const header = document.querySelector('header.sticky') as HTMLElement;
    if (!node || !header) return;

    // 改用getBoundingClientRect计算绝对位置，不受父元素定位属性影响，比offsetTop更稳定
    const nodeAbsoluteTop = node.getBoundingClientRect().top + window.scrollY;
    window.scrollTo({
      top: nodeAbsoluteTop - header.offsetHeight,
      behavior: 'instant'
    });
  };

  // 双重requestAnimationFrame保证执行时页面已完成两次重绘，布局完全稳定
  requestAnimationFrame(() => {
    requestAnimationFrame(scrollToAnchor);
  });

  // 兜底逻辑：页面所有资源加载完成后重新触发滚动，兼容懒加载资源场景
  const loadHandler = () => setTimeout(scrollToAnchor, 0);
  window.addEventListener('load', loadHandler);

  return () => {
    window.removeEventListener('load', loadHandler);
    if ('scrollRestoration' in history) {
      history.scrollRestoration = 'auto';
    }
  };
}, [router.asPath]);

额外排查项 #

如果修改后问题仍然存在，优先核对两个配置：

• 检查目标锚点附近的懒加载图片/视频是否未设置固定宽高占位，资源加载后会撑开页面导致滚动位置偏移
• 检查全局CSS是否配置了html { scroll-behavior: smooth; }，Safari 14.x对该属性的支持存在bug，会导致自定义scrollTo失效

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