scroll-behavior: smooth 生效需满足四条件：作用于实际滚动容器（通常是html）、目标元素可见且已挂载、用户未启用prefers-reduced-motion、移动端需兼容ios/android限制；还需配合scroll-margin-top避免遮挡，并在js中显式指定behavior: 'smooth'。
直接写 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，不报错也不提示
移动端 Safari 的 scroll-behavior: smooth 基本靠不住
iOS 15.4 之前完全不支持；15.4–16.0 支持但极不稳定，常卡顿、跳帧甚至静默失败；iOS 16+ 仅对 JS 调用 scrollIntoView({ behavior: 'smooth' }) 有效，CSS 全局声明依然被忽略。
安卓 Chrome 89+ 支持尚可，但部分 WebView（尤其 Cordova/Capacitor 封装环境）会拦截 hash 变更，导致 CSS 方案彻底失效。
所以：不要在移动端依赖 html { scroll-behavior: smooth; } 做兜底，它大概率什么都不会做。
必须搭配 scroll-margin-top 才算完整
哪怕 scroll-behavior 生效了，锚点跳转后目标元素也常被 sticky 导航栏遮住——这不是滚动不准，是浏览器默认把元素顶部对齐视口顶部，没考虑固定头部高度。
正确解法是用 CSS 给目标元素“预留空间”：
h2[id] {
scroll-margin-top: 72px; /* 和导航栏高度一致 */
}
别用 scroll-padding-top，它作用于整个滚动容器，和锚点定位无关；也别在 JS 里手动减去 offsetTop，那会破坏原生滚动行为（比如惯性、回弹、scroll 事件触发时机）。
JS 调用 scrollIntoView 时仍需显式传参
即使 html 已设 scroll-behavior: smooth，调用 el.scrollIntoView() 默认仍是 { behavior: 'auto' }，结果还是硬跳。
必须显式写：
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
注意两点：
-
block: 'start'（或'center'）强烈建议带上，否则不同浏览器默认对齐方式不一致（Chrome 用start，Firefox 用center） - 如果同时设置了
block: 'nearest'和inline: 'nearest'，部分浏览器可能因无法精确计算偏移而降级为auto，直接失去平滑效果
真正麻烦的从来不是加一行 CSS，而是确认滚动上下文在哪、目标是否真实可及、用户系统是否允许动画、以及移动端是否悄悄绕过了你的所有设定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
