Safari浏览器跨页面锚点链接无法滚动到对应id标签问题求助

问题核心原因 #

• 该问题是Safari浏览器特有的行为差异导致：单页应用跨路由跳转时，Safari会在路由切换触发的瞬间尝试匹配锚点对应的DOM元素，此时目标页面的对应id模块还未完成渲染，找不到元素就不会触发滚动，且Safari不会在DOM更新后自动重试锚点定位，其他浏览器会自动重试所以表现正常。
• 同页面内锚点跳转时DOM已经完成渲染，所以能正常定位。

修复方案 #

1. React 应用适配代码 #

在全局路由监听组件中添加以下逻辑，等待DOM渲染完成后手动触发滚动：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();

  useEffect(() => {
    if (location.hash) {
      const targetId = location.hash.slice(1);
      // 可根据页面渲染速度调整延迟时长，也可替换为MutationObserver实现更精准的监听
      setTimeout(() => {
        const targetElement = document.getElementById(targetId);
        if (targetElement) {
          targetElement.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }
      }, 100);
    }
  }, [location.pathname, location.hash]);

  // 其余应用逻辑
}

2. Vue 应用适配代码 #

在路由配置文件的afterEach钩子中添加处理逻辑：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [/* 你的路由配置 */]
});

router.afterEach((to) => {
  if (to.hash) {
    // 等待DOM更新完成后执行定位
    nextTick(() => {
      const targetElement = document.getElementById(to.hash.slice(1));
      if (targetElement) {
        targetElement.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
      }
    });
  }
});

3. 静态多页应用适配代码 #

在公共JS文件中添加页面加载完成监听：

window.addEventListener('load', () => {
  if (window.location.hash) {
    const targetId = window.location.hash.slice(1);
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
      targetElement.scrollIntoView();
    }
  }
});

注意事项 #

• 如果页面模块使用了懒加载，需要在懒加载组件挂载完成后再执行锚点定位逻辑
• 避免给html、body标签设置overflow-x: hidden属性，部分Safari版本会因为该属性导致scrollIntoView失效
• 如果不需要平滑滚动，可以去掉behavior: 'smooth'配置

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