scroll-behavior: smooth 必须作用于 html 元素才生效，写在 body 或 div 上无效；仅对原生锚点跳转和 scrollintoview() 生效，受系统“减少动画”偏好、目标元素可见性、id 严格匹配及框架路由拦截等多重限制。
scroll-behavior: smooth 必须作用于 html 元素
加了但没反应？90% 是写在了 body 或某个 div 上。浏览器只认 html 为滚动上下文根——哪怕你看到 body 在动，它也只是视觉代理。开发者工具里选中 html 元素，检查 computed 样式中 scroll-behavior 是否为 smooth，且未被 !important 覆盖（Ant Design 等框架常重置为 auto !important，需手动覆盖）。
id 值必须合法且唯一，否则锚点静默失效
原生锚点跳转不报错、不警告，错一点就彻底不工作：
-
href必须是#section-1形式，不能是section-1、/#section-1或?id=section-1 -
id不能以数字开头（id="1-section"在旧版 Safari 可能查不到），推荐id="section-1" -
id中不能含空格、中文、括号或句点（id="联系我们"或id="contact.us"都会中断） - 同一页面内
id必须唯一；重复时只滚动到第一个匹配元素 - 动态渲染内容（Vue/React）中，点击时目标元素若尚未挂载，
document.getElementById返回null，跳转即失败
固定头部遮挡目标元素？用 scroll-margin-top 补偿
默认滚动把目标顶部贴到视口顶部，position: fixed 导航栏会盖住内容。别用负 margin-top 或 padding-top 挤开——这破坏布局，且不是滚动偏移逻辑。
正确做法：给目标元素加 scroll-margin-top，例如：
h2[id] { scroll-margin-top: 64px; }
该值应等于固定头部高度（含 border/padding），支持 px、rem、vh。注意：scroll-margin-top 只在目标处于可滚动上下文内才生效；若目标在 Shadow DOM 或 iframe 中，需单独设置。
SPA 中锚点跳转被路由拦截？必须手动调用 scrollIntoView
Vue Router / React Router 默认阻止原生锚点行为，scroll-behavior: smooth 失效。需监听导航事件并主动滚动：
- 监听
click事件，e.preventDefault() - 用
history.pushState()更新 URL（保持前进/后退可用） - 再调用
document.getElementById(targetId).scrollIntoView({ behavior: 'smooth' }) - 若目标在懒加载区域（如 tab 切换后的内容），得等 DOM 渲染完成再调用；
MutationObserver比setTimeout更可靠 - 表单校验失败后滚动到首个错误字段，若该
input被fieldset[disabled]包裹，scrollIntoView会静默失败——得先检查元素是否可交互、是否在视口内、是否被 CSS 隐藏
behavior: 'smooth' 会被浏览器强制降级为 auto；某些 CSS 层叠上下文（如 transform、filter）会让 Safari 静默禁用平滑效果；而 SPA 中的路由拦截，根本不会触发 CSS 的滚动行为——这些都不是代码写错了，而是环境条件不满足。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
