scroll-behavior: smooth 必须写在 html 元素上才生效，写在 body 上无效；仅对锚点跳转和 scrollintoview() 生效，需配合 scroll-margin-top 避开固定头部，并受系统“减少动画”偏好及 ios safari 旧版本限制。
scroll-behavior: smooth 必须写在 html 元素上才生效，写在 body 上基本无效——这是 90% “没反应”的根源。
为什么只写 html { scroll-behavior: smooth; } 才管用
浏览器真正的页面级滚动容器是 html，不是 body。哪怕你看到 body 高度撑满、有滚动条，底层滚动上下文仍绑定在 html 上。Safari 尤其严格，body 上的声明会被直接忽略。
- 在开发者工具的 Computed 样式里检查
html元素，确认scroll-behavior的值确实是smooth，别只信源码 - 某些 CSS 重置（如
* { margin: 0; }）或 Normalize.css 可能意外重置了html的overflow，导致该属性静默失效 - 如果用了自定义滚动容器（比如一个
div.content设了overflow-y: auto），那得单独给它加scroll-behavior: smooth，和html无关
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/React 路由跳转（如
router.push('/about#contact')）不会触发该属性，因为不是原生锚点导航，需手动调用滚动 API
目标元素被导航栏遮挡？别算 offset，用 scroll-margin-top
锚点跳转后内容被固定定位的导航栏盖住，不是滚动错了，是浏览器把目标元素顶部对齐视口顶部。手动减去 offset 会破坏惯性、回弹和 scroll 事件时机。
- 给目标元素加
h2[id] { scroll-margin-top: 60px; }（值等于导航栏高度） - 这个属性只对锚点跳转和
scrollIntoView()生效，对scrollTo()无效 - 如果导航栏高度不固定（比如响应式折叠），优先用
scrollIntoView({ block: 'start', behavior: 'smooth' })配合 padding 补偿，而不是 JS 动态改scroll-margin-top
iOS Safari 和系统“减少动画”偏好怎么处理
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事件是否延迟触发 - 用户开启系统“减少动画”（
prefers-reduced-motion: reduce），Chrome/Firefox/Safari 都会强制禁用所有smooth行为，且不报错
最常被忽略的是：scroll-behavior 控制“谁来滚”，而 JS 的 { behavior: 'smooth' } 参数决定“怎么滚”，两者职责分明。漏掉任一端，平滑效果就断了——尤其在 SPA 路由 + 动态渲染 + 固定导航的组合场景里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
