scroll-behavior: smooth 必须写在 html 元素上才生效，仅对锚点链接和 scrollintoview() 有效，受浏览器版本、css 重置、导航栏遮挡及系统动画偏好影响。
直接写 html { scroll-behavior: smooth; } 就能生效，但绝大多数“没反应”不是属性写错，而是作用对象、触发方式或浏览器限制出了问题。
scroll-behavior 必须加在 html 上才起作用
浏览器的页面级滚动容器是 html 元素，不是 body。很多项目误写成 body { scroll-behavior: smooth; }，结果完全没动画——这是最常踩的坑。
- 务必用
html { scroll-behavior: smooth; }，并在开发者工具的 Computed 样式中确认该值是否为smooth - 如果用了 CSS 重置（比如
* { margin: 0; }），注意别意外覆盖了html的默认overflow或height - 部分 UI 框架（如 Normalize.css）会重置
html的overflow，导致该属性被静默忽略
哪些操作能触发 scroll-behavior: smooth
它只对两类行为生效：用户点击锚点链接（<a href="#section"></a>）和 JS 调用 element.scrollIntoView()（且未传 behavior 参数时）。
-
element.scrollTop = 100、window.scrollTo(0, 200)这类直接赋值完全不受影响 - 想用 JS 实现平滑滚动，必须显式传参：
element.scrollTo({ top: 100, behavior: 'smooth' })或element.scrollIntoView({ behavior: 'smooth' }) - 单页应用中路由变化（如 Vue Router / React Router）不会触发该属性，必须手动调用滚动 API
锚点跳转后目标元素被导航栏遮挡
这不是滚动错了，是浏览器把目标元素顶部对齐视口顶部，而固定定位的导航栏盖住了内容。
- 在目标元素上加
scroll-margin-top: 60px（值等于导航栏高度），浏览器会在平滑滚动结束时自动预留空白 - 该属性只对锚点跳转和
scrollIntoView()生效，对scrollTo()无效 - 若导航栏高度不固定（如响应式折叠），需用 JS 动态更新该值，或改用
scrollIntoView({ block: 'start', behavior: 'smooth' })配合 padding 补偿
iOS Safari 和旧安卓 WebView 不支持怎么办
iOS Safari 直到 15.4 才真正支持 scroll-behavior: smooth；15.0–15.3 版本静默忽略；所有 iOS 14 及以前版本完全不识别。微信 X5 内核等安卓 WebView 也有类似问题。
- 不要依赖
@supports (scroll-behavior: smooth)做兼容判断——它只检测 CSS 属性，不反映 JS 行为是否可用 - 更可靠的检测是：
typeof Element.prototype.scrollIntoView === 'function'，再配合实际调用后监听scroll事件是否延迟触发 - 关键交互中建议统一用
el.scrollIntoView({ behavior: 'smooth', block: 'start' })主动控制，比纯 CSS 更可控，也更容易做降级
最容易被忽略的是：系统级“减少动画”偏好（prefers-reduced-motion: reduce）会让 Chrome/Firefox 静默禁用 behavior: 'smooth'，哪怕代码里写了也无效；而 scroll-margin-top 在这种场景下依然有效，但它无法绕过系统对滚动行为本身的干预。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
