scroll-behavior: smooth 仅对原生锚点跳转（如 ）和 element.scrollintoview() 生效，对 js 滚动（如 window.scrollto、路由导航）无影响；spa 中需手动传 { behavior: 'smooth' } 或用 scroll-margin-top 解决固定头部遮挡问题。
scroll-behavior: smooth 只接管原生锚点跳转，不干预 JS 滚动
它不会“影响”单页应用的锚点定位——而是根本不管。CSS 的 scroll-behavior: smooth 仅对两种行为生效：<a href="#section"></a> 这类原生锚点点击，以及 element.scrollIntoView()（未传参数或传 { behavior: 'auto' } 时）。它对 window.scrollTo()、history.pushState() 或路由切换后的手动滚动完全无感。
常见误解是：「我加了 scroll-behavior，但 Vue Router 点击菜单还是瞬移」——这不是失效，是压根没被调用。SPA 中的导航通常阻止默认行为、用 JS 控制滚动，此时 CSS 规则根本不参与链路。
- React/Vue 路由跳转后调用
el.scrollIntoView()，若没显式传{ behavior: 'smooth' }，就只是“立刻滚”，和 CSS 无关 - 直接写
window.scrollTo(0, y)，哪怕 html 有scroll-behavior: smooth，也只会瞬移 - 第三方滚动库（如 locomotive-scroll）或自定义滚动容器会彻底绕过浏览器原生滚动上下文，CSS 属性自然失效
为什么加了 scroll-behavior 后锚点反而偏移或跳空？
不是 CSS “影响”了定位，而是它暴露了 DOM 状态不一致的问题。当目标元素在点击瞬间还不存在（比如异步组件、懒加载区块、v-if 条件渲染未满足），浏览器按旧布局计算 offset，scroll-behavior 就会滚到一个空白位置——它无法感知后续 DOM 插入。
典型场景：
- Vue 的
<component :is="asyncComp"></component>尚未 resolve，document.getElementById('faq')返回null，但浏览器仍尝试滚动，结果停在顶部 - React 中
useEffect里才挂载目标元素，而 hashchange 已触发，CSS 滚动已执行完毕 - 目标元素被
transform: translateY()移动过，浏览器无法准确读取其视口坐标，导致终点错位
scroll-margin-top 是唯一该用 CSS 解决的偏移问题
固定头部遮挡锚点顶部，是 scroll-behavior 唯一需要且必须用 CSS 修正的场景。它不是“影响定位”，而是告诉浏览器：“把目标元素顶部对齐的位置，往上抬 scroll-margin-top 那么多”。这个偏移量由浏览器自动纳入滚动终点计算，比 JS 动态算 offsetTop - headerHeight 更可靠，不依赖渲染时机。
正确写法：
-
h2[id] { scroll-margin-top: 64px; }（匹配固定导航栏高度） -
section[id] { scroll-margin-top: clamp(48px, 6vh, 80px); }（响应式适配） - 不要给
html或body加scroll-padding-top——它作用于整个视口滚动内边距，与锚点定位逻辑无关，反而容易引发错位
兼容性断层会让 smooth 行为静默退化为 auto
Safari ≤15.3 完全忽略 scroll-behavior: smooth，且不抛错、不警告，用户点击锚点就是瞬移。更隐蔽的是系统级设置干扰：macOS/iOS 开启「减少动画」后，即使 Safari ≥15.4，scroll-behavior: smooth 也会被强制降级为 auto，且开发者工具里仍显示 computed 值为 smooth，极易误判。
验证是否真生效，不能只看样式声明：
- 打开 DevTools → Elements → 选中
html元素 → Computed 标签页搜scroll-behavior，确认值为smooth且无!important覆盖 - 手动点击一个合法锚点链接（
href="#valid-id"），观察是否出现平滑过渡；瞬移即说明未生效 - 不要依赖
@supports (scroll-behavior: smooth)判断——它只测语法支持，不测运行时是否被系统策略禁用
真正容易被忽略的，是 DOM 就绪时机和系统动画策略这两层静默干预——它们不会报错，也不会打断流程，但会让平滑滚动在用户侧彻底消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
