scroll-behavior: smooth 生效需满足：作用于 html 元素、目标可见、未启用 prefers-reduced-motion；仅对锚点链接和 scrollIntoView() 有效，不适用于 scrollTop 或 scrollTo()；iOS Safari 15.4+ 才真正支持。
直接写 html { scroll-behavior: smooth; } 就能生效，但绝大多数“没动画”问题，根源不在属性本身，而在滚动容器判断错误、目标元素不可见或浏览器限制。
为什么写了 scroll-behavior: smooth 却还是“啪”一下跳过去
这不是 CSS 写错了，而是浏览器根本没把它当回事。真实原因通常有这几个：
-
scroll-behavior只对实际滚动容器生效——页面级滚动容器是html元素，不是body；body { scroll-behavior: smooth; }在多数浏览器里完全无效 - 用了自定义滚动容器（比如
.content { overflow: auto; }），但把scroll-behavior加在了html上，此时平滑只会在html滚动时触发，而实际滚动发生在子容器里 - 目标锚点元素被
display: none或visibility: hidden隐藏，或尚未挂载（如 Vue/React 动态渲染后未等 DOM 更新就点击链接） - 用户系统开启了
prefers-reduced-motion: reduce，浏览器会静默禁用所有scroll-behavior: smooth，不报错也不提示
哪些操作能触发 scroll-behavior: smooth
它只对两类行为生效：用户点击锚点链接（<a href="#section">）和 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
锚点跳转后目标元素被导航栏遮挡
这不是滚动错了，是浏览器把目标元素顶部对齐视口顶部，而固定定位的导航栏盖住了内容。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 在目标元素上加
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事件是否延迟触发 - 关键交互中建议 fallback 到 JS 方案：监听
hashchange+element.scrollIntoView({ behavior: 'smooth' })，并确保元素已挂载
最常被忽略的是：scroll-behavior 只控制“谁来滚”，而 JS 的 behavior 参数决定“怎么滚”，两者职责分明，不能互相替代；一端漏掉，平滑就断了。
