scroll-behavior: smooth 必须写在 html 元素上才生效，因浏览器滚动上下文绑定在 html；仅对锚点链接和 scrollintoview() 生效，不作用于 scrolltop 或 scrollto()；需配合 scroll-margin-top 解决固定头部遮挡，并注意 ios safari 15.4+ 才真正支持。
scroll-behavior: smooth 必须写在 html 元素上才生效，写在 body 上基本无效——这是 90% “没反应”的根源。
为什么只对 html 元素设置才管用
浏览器真正的页面级滚动容器是 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无关 - Next.js、Remix 等框架可能注入 wrapper
div，需用 DevTools 查看实际滚动根元素是否仍是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 - 动态渲染的组件中，
id元素尚未挂载就点击链接，会静默失败或滚到顶部
锚点跳转后内容被固定头部遮挡怎么办
这不是滚动错了，是浏览器把目标元素顶部对齐视口顶部，而 position: fixed 或 sticky 导航栏盖住了内容。手动减去 offsetTop 会破坏惯性、回弹和 scroll 事件时机。
- 给目标元素加
scroll-margin-top: 60px（值等于导航栏高度），浏览器会在平滑滚动结束时自动预留空白 - 该属性只对锚点跳转和
scrollIntoView()生效，对scrollTo()无效 - 如果导航栏高度不固定（比如响应式折叠），优先用
scrollIntoView({ block: 'start', behavior: 'smooth' })配合padding补偿，而不是 JS 动态改scroll-margin-top
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事件是否延迟触发 - 关键交互中建议 fallback 到 JS 实现简易缓动，或降级为
behavior: 'auto'，避免白屏或卡死
最常被忽略的其实是：即使 CSS 写对了，scroll-behavior: smooth 也只在目标元素可见、id 严格匹配、且未被 overflow: hidden 或 transform 隔离的前提下才起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
