scroll-behavior必须写在html元素上才生效，body上无效；仅对原生锚点跳转和scrollIntoView()起作用；移动端尤其iOS Safari支持极差，需用JS显式调用并传behavior: 'smooth'参数。
scroll-behavior必须写在html上才生效
写在body上基本无效——浏览器把整页滚动容器认作html元素，不是body。哪怕body高度撑满、有滚动条，底层滚动上下文仍绑定在html上，Safari 尤其严格。
验证是否真正生效：打开开发者工具 → 选中html元素 → 查看 Computed 样式里scroll-behavior的值是不是smooth，别只信源码写了就完事。
-
* { margin: 0; }这类重置可能意外覆盖html默认的overflow或height，导致滚动上下文被破坏 - 某些 Normalize.css 版本会设
html { overflow: hidden; }，直接让该属性静默失效 - Next.js、Remix 等框架常注入 wrapper
div，需用 DevTools 确认实际滚动根元素是否仍是html
哪些操作能触发scroll-behavior: smooth？
它只对两类行为起效：用户点击原生锚点链接（<a href="#section">）和 JS 调用element.scrollIntoView()（且未传参时走默认行为）。其他所有滚动方式都完全不响应。
-
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，别算 offset
这不是滚动不准，是浏览器默认把目标元素顶部对齐视口顶部，而position: sticky或fixed导航栏盖住了内容。解决方案不是 JS 计算 offset，而是给目标元素加scroll-margin-top。
立即学习“前端免费学习笔记（深入）”；
-
h2[id] { scroll-margin-top: 60px; }（值等于导航栏高度） -
scroll-margin-top只对锚点跳转和scrollIntoView()生效，对scrollTo()无效 - 若导航栏高度响应式变化（如折叠菜单），JS 动态更新该值比反复计算滚动位置更可靠，但更推荐改用
scrollIntoView({ block: 'start', behavior: 'smooth' })配合 padding 补偿
iOS Safari 基本不能指望scroll-behavior: smooth自动工作
iOS Safari ≤15.3 完全不识别；15.4–16.0 支持但极不稳定，常卡顿或静默降级；iOS 16+ 仅对 JS 调用scrollIntoView({ behavior: 'smooth' })有效，CSS 全局声明依然被忽略。
安卓 Chrome 89+ 支持尚可，但部分 WebView（尤其 Cordova/Capacitor 封装环境）会拦截 hash 变更，导致 CSS 方案彻底失效。所以移动端不要依赖html { scroll-behavior: smooth; }做兜底，它大概率什么都不会做。
复杂点在于：即使你写了html { scroll-behavior: smooth; }，也开了scroll-margin-top，还处理了prefers-reduced-motion，iOS 上仍可能毫无反应——这时候得切回 JS 方案，且要带behavior: 'smooth'参数，不能省略。
