scroll-behavior: smooth 生效需写在 html 元素上，因根滚动容器是 html 而非 body；须确保目标元素已挂载、id 严格匹配、未被隐藏或脱离文档流，并注意固定导航栏遮挡时用 scroll-margin-top 修正，同时兼容 prefers-reduced-motion 和 webview 降级。
直接写 html { scroll-behavior: smooth; } 就能生效，但 90% 的“没反应”问题出在容器选错、目标不可见或被系统设置屏蔽。
为什么只写 html 而不是 body
浏览器的根滚动容器是 html 元素，body 只是其子元素。哪怕页面内容撑满视口，真正承载滚动条、响应锚点跳转的仍是 html。写在 body 上完全无效——这不是兼容性差异，是规范定义。
常见干扰项：
-
html, body { scroll-behavior: auto !important; }这类重置样式会覆盖你的设置，需用开发者工具检查 computed 样式中scroll-behavior是否真为smooth -
html { height: 100vh; overflow: hidden; }会让html失去滚动能力，该属性彻底失效
scroll-behavior: smooth 生效的前提条件
它只对原生锚点跳转（<a href="#section"></a>）和部分 JS 滚动 API（如 element.scrollIntoView({ behavior: 'smooth' })、window.scrollTo()）起作用，且依赖目标可定位。
必须同时满足：
- 目标元素已挂载：React/Vue 中用
v-if或useState控制显示时，跳转可能早于 DOM 渲染，offsetTop为 0 - ID 严格匹配：
#FAQ和id="faq"不等价；空格、大小写、连字符都不能错 - 目标未被隐藏：
display: none、visibility: hidden、transform或父级overflow: hidden都会导致定位失败 - 目标在文档流中：脱离流的
position: absolute元素或嵌套在局部滚动容器（如.content { overflow-y: auto; }）里的元素，html上的设置管不到
固定导航栏遮挡标题怎么办
不是 JS 偏移算错了，而是浏览器默认把锚点顶部对齐视口顶部，而 position: fixed 导航栏盖住了它。
正确解法是给目标元素加 scroll-margin-top：
-
h2[id] { scroll-margin-top: 60px; }—— 值建议与导航栏实际高度一致 - 响应式场景可用
scroll-margin-top: clamp(50px, 8vh, 80px); - 别误用
scroll-padding-top：它是作用于整个滚动视口的内边距，和锚点定位无关，加在html或body上无效
iOS Safari 和系统设置导致静默失效
scroll-behavior: smooth 在 iOS Safari 上支持良好，但若用户开启了系统级「减少动画」（prefers-reduced-motion: reduce），该属性会被浏览器自动降级为 auto，且不报错、不警告。
如果你的应用对动效有强依赖，需要主动适配：
- 用
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }显式声明降级行为 - 不要指望 JS 检测
scroll-behavior计算值来判断是否生效——它始终返回你写的值，而非运行时真实行为 - 移动端某些 WebView（如微信内置）可能未完整实现该属性，需 fallback 到
element.scrollIntoView({ behavior: 'smooth' })
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
