直接用 window.scrollTo 在 React/Vue 中跳不准，因目标元素可能未渲染、SSR 与客户端 DOM 不一致或异步组件未挂载；应延后执行、用 getBoundingClientRect 计算位置，并注意兼容性与样式影响。
为什么直接用 window.scrollTo 在 React/Vue 里经常跳不准
因为目标元素可能还没渲染出来，document.getElementById 拿到的是 null，或者 DOM 节点位置在 SSR/服务端渲染后与客户端不一致。尤其跨组件时，目标锚点常在异步加载的子组件里，useEffect 或 mounted 阶段执行太早，offsetTop 计算为 0。
实操建议：
- 不要在组件挂载后立刻调用
window.scrollTo，改用requestAnimationFrame或setTimeout(..., 0)延迟到 DOM 稳定后执行 - 优先用
element.getBoundingClientRect().top + window.scrollY替代element.offsetTop，避免受父级position或transform影响 - 如果目标是动态生成的（比如列表项），确保传入的
id是唯一且已挂载的，可用querySelector配合属性选择器兜底，例如document.querySelector('[data-anchor-id="section-2"]')
React 中正确触发平滑滚动的时机和写法
关键不是“能不能用 behavior: smooth”，而是“什么时候能安全拿到目标节点”。推荐在 useLayoutEffect 里做，它在 DOM 更新后、浏览器绘制前执行，比 useEffect 更可靠。
示例（带防错）：
useLayoutEffect(() => {
if (!hash) return;
const id = hash.replace('#', '');
const element = document.getElementById(id);
if (!element) return;
<p>const offsetTop = element.getBoundingClientRect().top + window.scrollY;
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
}, [hash]);</p>
注意点：
-
hash应来自useLocation().hash（React Router v6+）或监听hashchange事件 - 不要在
scrollTo前加preventDefault()——那是处理a标签点击时才需要的 - 若页面有固定头部，记得减去其高度：例如
top: offsetTop - 80
Vue 3 组合式 API 下如何复用滚动逻辑
Vue 没有内置的“滚动到锚点”钩子，但可以用 onMounted + nextTick 保证节点存在，再配合 ref 或查询方式定位。
实操建议：
- 用
ref显式绑定目标元素比靠id更可控，尤其在v-for场景下 -
nextTick必须调用两次才能确保所有嵌套子组件完成挂载（第一次等当前组件，第二次等子组件） - 滚动前检查
el?.offsetParent是否为null，避免因display: none或v-if导致元素不可见却仍被查到 - 别忘了在
watch中监听路由变化，否则前进/后退不会触发重新滚动
behavior: smooth 不生效的常见原因和绕过方案
不是所有环境都支持 behavior: smooth，比如 Safari 15.4 之前版本、某些 WebView、或用户禁用了动画偏好（prefers-reduced-motion: reduce）。这时 scrollTo 会静默退化为立即滚动。
应对方法：
- 用
window.matchMedia('(prefers-reduced-motion: reduce)').matches主动检测，手动降级为behavior: auto或 CSSscroll-behavior: smooth全局设置 - CSS 方案更稳定：
html { scroll-behavior: smooth; }，但只对原生锚点链接（）有效，对 JS 调用无影响 - 真要兼容老环境，就别依赖
behavior，改用scrollIntoView({ block: 'start', behavior: 'smooth' })，它兼容性略好，且自动计算偏移
最易被忽略的一点：如果目标元素本身设置了 overflow: hidden 或 transform，会导致 getBoundingClientRect() 返回错误坐标，必须用 element.getClientRects()[0] 或逐层向上取 offsetParent 校正。
