scroll-behavior: smooth 必须写在 html 元素上才生效，仅对锚点跳转和 scrollIntoView() 有效，不支持旧版 Safari 和部分安卓 WebView，需配合 scroll-margin-top 解决导航栏遮挡问题。
直接写 html { scroll-behavior: smooth; } 就能生效，但绝大多数“没反应”问题，不是属性写错，而是作用对象、触发方式或浏览器限制出了问题。
scroll-behavior 必须加在 html 上，body 上基本无效
浏览器页面级滚动容器是 html 元素，不是 body。很多项目在 body 上写 scroll-behavior: smooth，结果完全没动画——这是最常踩的坑。
- 务必用
html { scroll-behavior: smooth; }，并检查开发者工具的 computed 样式里该值是否为smooth - 如果用了 CSS 重置（比如
* { margin: 0; }），注意别意外覆盖了html的默认overflow或height -
body上加该属性，在旧版 Safari 和部分安卓 WebView 中会被静默忽略
它只对锚点跳转和 scrollIntoView() 生效，不接管 JS 直接赋值
scroll-behavior: smooth 不是全局滚动开关，它只影响两类行为：用户点击 这类锚点链接，以及 JS 调用 element.scrollIntoView()（且未传 behavior 参数时）。
-
element.scrollTop = 100、window.scrollTo(0, 200)这类写法完全不受影响，必须显式传参：element.scrollTo({ top: 100, behavior: 'smooth' }) - 哪怕
html已设scroll-behavior: smooth，el.scrollIntoView()不带参数仍是“硬跳”，得写成el.scrollIntoView({ behavior: 'smooth' }) - 单页应用中路由变化（如 Vue Router / React Router）不会触发该属性，必须手动调用
scrollIntoView或scrollTo
移动端和旧 Safari 的支持现实
iOS Safari 直到 15.4 才真正支持 scroll-behavior: smooth，而 15.0–15.3 版本会静默忽略；更早版本（包括所有 iOS 14 及以前）完全不识别。安卓部分 WebView（如微信 X5 内核）也存在类似情况。
- 不要依赖
@supports (scroll-behavior: smooth)做兼容判断——它只检测 CSS 属性，不反映 JS 行为是否可用 - 更可靠的检测是：
typeof Element.prototype.scrollIntoView === 'function'+ 实际调用后监听scroll事件是否延迟触发 - 在关键交互（如导航菜单点击）中，建议统一用
el.scrollIntoView({ behavior: 'smooth', block: 'start' })主动控制，比纯 CSS 更可控
锚点被固定导航栏遮挡？用 scroll-margin-top 补偿
加了 scroll-behavior: smooth 后，点击跳转目标元素顶部总被 sticky 导航栏盖住——这不是滚动错了，是浏览器默认把目标元素的 top 对齐视口顶部，没考虑布局偏移。
- 在目标元素上加
scroll-margin-top: 60px（值等于导航栏高度），浏览器会在平滑滚动结束时自动预留这段空白 - 该属性只对锚点跳转和
scrollIntoView()生效，对scrollTo()无效 - 避免误用
scroll-padding-top，它是作用于整个视口的，和锚点定位无关
真正难的从来不是写那一行 CSS，而是搞清「谁在滚动」「谁触发滚动」「谁被滚动」——这三个问题没理清，scroll-behavior: smooth 就永远像没写一样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
