scroll-behavior: smooth 必须写在 html 元素上才生效，写在 body 上无效；仅对原生锚点链接点击和 scrollintoview() 调用生效，受系统“减少动画”偏好、css 重置、框架包裹及 ios safari 兼容性限制。
scroll-behavior: smooth 必须写在 html 上才生效
写在 body 上基本等于没写。浏览器把整页滚动容器认作 html 元素，不是 body ——哪怕你看到 body 在动，那也只是视觉错觉。开发者工具里检查 html 的 Computed 样式，确认 scroll-behavior 确实是 smooth，而不是靠猜。
常见干扰项：
-
* { margin: 0; }类重置可能意外覆盖html的默认overflow或height，导致滚动上下文被破坏 - Next.js、Remix 等框架可能注入 wrapper
div，需用 DevTools 查看实际滚动根元素是否仍是html - 某些 Normalize.css 版本会重置
html { overflow: hidden; }，直接让该属性静默失效
哪些操作能触发 scroll-behavior: smooth
它只对两类行为起效：用户点击原生锚点链接（<a href="#section"></a>）和 JS 调用 element.scrollIntoView()（且未传参时走默认行为）。其他所有滚动方式都完全不响应这个 CSS 属性。
典型误用场景：
-
element.scrollTop = 100或window.scrollTo(0, 200)—— 这类直接赋值不会触发平滑动画，必须显式加参数：window.scrollTo({ top: 100, behavior: 'smooth' }) - Vue Router / React Router 的路由跳转 —— CSS 不监听
history.pushState()，必须在路由变更后手动调用scrollIntoView({ behavior: 'smooth' }) - 动态渲染的组件（如 Vue/React）中，
id元素尚未挂载就点击链接，会静默失败或滚到顶部
锚点被导航栏遮住？别算偏移，用 scroll-margin-top
这不是滚动不准，是浏览器默认把目标元素顶部对齐视口顶部，而 position: sticky 或 fixed 导航栏盖住了内容。解决方案不是 JS 计算 offset，而是给目标元素加 scroll-margin-top：
-
<h2 id="section2" style="scroll-margin-top: 60px;">标题</h2>（值等于导航栏高度） - 若导航栏高度响应式变化（如折叠菜单），JS 动态更新该值比反复计算滚动位置更可靠
-
scroll-margin-top只对锚点跳转和scrollIntoView()生效，对scrollTo()无效
iOS Safari 和旧 WebView 别指望它自动工作
iOS Safari ≤15.3 完全不识别 scroll-behavior: smooth；15.4–16.0 支持但极不稳定，常卡顿或静默降级；iOS 16+ 仅对 JS 调用 scrollIntoView({ behavior: 'smooth' }) 有效，CSS 全局声明依然被忽略。微信 X5 内核等安卓 WebView 也类似。
兼容性检测不能只靠 @supports (scroll-behavior: smooth)，它不反映 JS 行为是否可用。更靠谱的是：
- 先判断
typeof Element.prototype.scrollIntoView === 'function' - 再配合实际调用后监听
scroll事件是否延迟触发（非立即完成） - 关键交互中建议 fallback 到
scrollIntoViewIfNeeded()（Safari 支持）或轻量级 JS 模拟，而非强依赖 CSS
最常被忽略的一点：系统开启了 prefers-reduced-motion: reduce（macOS/Windows 设置里“减少动画”），Chrome/Firefox/Safari 都会强制禁用所有 behavior: 'smooth'，且不报错、不提示——这是浏览器主动尊重用户偏好，不是 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
