scrollIntoView 是最直接可控的滚动方式，优先于 CSS 的 scroll-behavior: smooth；需校验元素存在、可滚动上下文及系统动效偏好，并用 scroll-margin-top 或 block: 'center' 避开固定头部，SPA 中须确保 DOM 渲染完成后再调用。
scrollIntoView 是最直接、最可控的方式，比依赖 scroll-behavior: smooth 更适合“滚动到指定元素”这一明确动作。
为什么优先用 scrollIntoView 而不是只靠 CSS？
因为 scroll-behavior: smooth 只对**锚点跳转（a[href="#id"]）和 JS 滚动调用**生效，但不保证目标一定可见或可交互；而 scrollIntoView 是元素级方法，能主动触发、可配置对齐方式、且失败时有迹可循。
- 它天然适配动态渲染场景（如 React/Vue 中的
ref元素），只要 DOM 存在就能调用 - 支持
block和inline精确控制垂直/水平对齐位置，比如避开固定头部 - 不依赖页面是否设置了
html { scroll-behavior: smooth }，行为更确定 - 调用后若失败（如目标被
display: none或未挂载），会静默忽略——所以必须先校验
scrollIntoView 必须检查的三个状态
调用前不验证，90% 的“没反应”问题都出在这三处：
-
element是否真实存在：用if (!el || !el.offsetParent)判断，offsetParent === null表示被隐藏或未渲染 - 目标是否在可滚动上下文中：如果父容器是
overflow: hidden且高度固定，scrollIntoView会尝试滚动document，而非你预期的容器 - 系统是否禁用动效：
@media (prefers-reduced-motion: reduce)下，behavior: 'smooth'自动退化为'auto'，这是浏览器行为，无需报错也不可绕过
怎么让目标元素不被固定头部遮挡？
别在 JS 里手动减去 header 高度——响应式变化时极易错位。正确做法是用 CSS 修正滚动终点：
立即学习“前端免费学习笔记（深入）”；
- 给目标元素加
scroll-margin-top: 64px（数值等于你的 fixed header 高度） - 或调用时用
block: 'center'：el.scrollIntoView({ behavior: 'smooth', block: 'center' }) - 二者可共存：
block: 'center'保证居中，scroll-margin-top微调起点，更鲁棒
SPA 中点击链接后滚动失效？重点看时机
路由拦截后，目标元素可能还没渲染出来。不能一监听就调用，得等 DOM 就绪：
- Vue：在
nextTick后调用，或用v-show替代v-if保持节点存在 - React：确保在
useEffect或useLayoutEffect中操作 ref，且依赖项包含目标是否已挂载 - 通用方案：用
MutationObserver监听目标父容器，或轮询el.offsetParent直到非 null
真正容易被忽略的，是“目标元素是否可交互”——比如它被 fieldset[disabled] 包裹，或父级有 pointer-events: none，这时 scrollIntoView 仍会执行，但用户无法聚焦或操作该元素，平滑滚动就失去了意义。
