可以实现，但必须处理好 hash 变化、滚动目标定位和浏览器默认行为三者的冲突，否则会出现跳转失效、重复滚动或目标偏移；需拦截默认行为、用 data-scroll-id 查找元素、在 DOM 就绪时滚动、修正 header 偏移、适配 popstate 并防抖。
直接结论：可以实现，但必须处理好 hash 变化、滚动目标定位和浏览器默认行为三者的冲突，否则会出现跳转失效、重复滚动或目标偏移。
为什么 window.scrollTo({ behavior: 'smooth' }) 在 SPA 锚点跳转中常失效
SPA 里点击 #section2 链接时，浏览器默认会立即滚动并触发 hashchange，但此时 DOM 可能尚未就绪（比如异步加载的组件还没挂载），document.getElementById('section2') 返回 null；更隐蔽的问题是，React/Vue 的路由守卫或 useEffect/onMounted 执行时机晚于浏览器默认滚动，导致 window.scrollTo 被覆盖。
常见错误现象：scrollTo 没反应、滚动到顶部、或滚到错误位置。
- 不要在
hashchange回调里直接调用scrollTo，因为此时元素可能还不存在 - 避免在路由
beforeEach或onBeforeRouteUpdate中同步执行滚动——这些钩子不保证 DOM 已更新 - Vue 3 的
nextTick、React 的useLayoutEffect是必要时机，不是可选优化
如何正确获取并滚动到目标元素（兼容 ID 和 data-scroll-id）
不能只依赖 location.hash 去查 getElementById，现代框架常禁用原生 ID 绑定（如 Vue 的 v-for 生成元素无静态 ID），推荐统一用 data-scroll-id 属性标识目标。
实操建议：
- 锚点链接写成
<a href="#about" data-scroll-to="about">关于我们</a>，不依赖id属性 - 监听
click事件拦截默认跳转，用event.preventDefault()阻止浏览器默认行为 - 用
document.querySelector('[data-scroll-id="' + target + '"]')查找目标，比getElementById更可控 - 若目标未找到，加一个
setTimeout重试（最多 1 次），避免因懒加载导致的短暂缺失
示例关键逻辑：
document.addEventListener('click', (e) => {
const link = e.target.closest('a[data-scroll-to]');
if (!link) return;
e.preventDefault();
const targetId = link.dataset.scrollTo;
const el = document.querySelector(`[data-scroll-id="${targetId}"]`);
if (el) {
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
滚动偏移修正（避开固定 Header）
平滑滚动后，目标元素顶部常被 sticky header 遮挡。不能靠 CSS scroll-margin-top 一劳永逸——它在 Safari 旧版本和部分安卓 WebView 中不生效，且无法动态响应 header 高度变化。
更稳妥的做法是在 scrollIntoView 后手动调整 window.scrollY：
- 先记录当前
scrollY，再调用scrollIntoView - 在
setTimeout(() => {}, 100)中读取新scrollY，减去 header 高度（例如document.querySelector('header').offsetHeight） - 用
window.scrollTo({ top: correctedY, behavior: 'auto' })补偿（注意这里用behavior: 'auto'，避免二次 smooth 导致卡顿） - 如果 header 高度动态变化（如滚动时收缩），需监听
scroll并缓存最新高度
history.pushState 后如何触发平滑滚动（如搜索结果页回退）
用户点击浏览器后退按钮时，popstate 触发，但此时页面已渲染完成，DOM 就绪，反而比 hashchange 更适合滚动。不过要注意：Vue Router 的 scrollBehavior 默认返回 { x: 0, y: 0 }，会覆盖你的平滑逻辑。
实操要点：
- 在
popstate事件中解析location.hash，再按前述方式查找并滚动目标 - Vue Router 用户必须显式关闭内置滚动：设置
scrollBehavior: () => {}（空函数），否则它会在你滚动后强行置顶 - React Router v6 没有内置滚动控制，需在
useLocation变化时手动触发，且要加useLayoutEffect确保 DOM 同步 - 务必加防抖：同一 hash 连续触发两次
popstate（如快速点进退）可能导致滚动中断
最易被忽略的一点：所有滚动操作都应检查 el.offsetParent !== null，防止元素被 v-if 或 display: none 隐藏后仍尝试滚动——这会导致静默失败，且无法捕获错误。
