scroll-behavior: smooth 生效需作用于实际滚动容器，如页面级滚动写 html，局部滚动写对应容器；受 CSS 覆盖、iOS Safari 兼容性、触发方式（仅锚点链接和默认 scrollIntoView）及目标可见性限制。
直接加 html { scroll-behavior: smooth; } 通常就能生效，但绝大多数“没反应”问题，根源不在写法，而在滚动容器错位、CSS 覆盖或目标不可见。
scroll-behavior 生效的前提：必须作用在真正滚动的容器上
浏览器只对实际发生滚动的元素应用该属性。它不看“你写了哪儿”，而看“滚动条实际属于谁”：
- 如果整个页面靠
html滚动（默认行为），那就必须写html { scroll-behavior: smooth; }； - 如果用了
.main { overflow-y: auto; height: 100vh; }这类局部滚动区，scroll-behavior必须写在.main上，写在html或body上完全无效； - 某些 UI 框架（如 Ant Design、Bootstrap）的重置 CSS 可能含
html, body { scroll-behavior: auto !important; }，会直接覆盖你的设置； - iOS Safari ≤15.4 完全不支持
html上的scroll-behavior，需补一句body { scroll-behavior: smooth; }兜底。
哪些操作能触发 smooth，哪些不能
scroll-behavior: smooth 只接管两类原生滚动行为：
- 用户点击
<a href="#section"></a>这类锚点链接； - JS 调用
element.scrollIntoView()且未传{ behavior: 'smooth' }（即走默认行为）。
以下操作**完全不受影响，仍会硬跳**：
立即学习“前端免费学习笔记（深入）”；
-
element.scrollTop = 100—— 必须改用element.scrollTo({ top: 100, behavior: 'smooth' })； -
window.scrollTo(0, 200)—— 同样必须显式传{ behavior: 'smooth' }； - Vue/React 路由跳转带 hash（如
router.push('/about#contact')）—— 因为不是原生锚点导航，需监听路由变化后手动调用document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })。
锚点滚动后内容被固定头部遮挡？别乱减 offsetTop
这不是 scroll-behavior 的 bug，而是浏览器把目标元素顶部对齐视口顶部，而 position: sticky 或 fixed 导航栏盖住了它：
- 正确解法是给目标元素加
scroll-margin-top，例如：h2[id] { scroll-margin-top: 60px; }； - 值建议等于导航栏高度；响应式场景可用
scroll-margin-top: clamp(50px, 8vh, 80px);； -
scroll-margin-top只对锚点跳转和scrollIntoView()生效，对scrollTo()无效； - 切勿用
padding-top或margin-top模拟 —— 它们会破坏文档流和布局，且无法精准匹配滚动定位逻辑。
目标元素 ID 和可见性常被忽略的细节
即使 CSS 写对了，:target 和滚动定位也依赖 DOM 状态：
- ID 必须合法：
id="1section"无效（数字开头），应改为id="section-1"； - 目标不能被
display: none、visibility: hidden或父级overflow: hidden遮挡，否则浏览器无法测量其位置； - SPA 中目标元素可能尚未渲染（比如懒加载区块），需确保 hash 变更后目标已挂载，否则首次点击失败；
- 目标若在 Shadow DOM 内（如 Web Component），
scroll-behavior无法穿透，必须用 JS 显式调用element.scrollIntoView({ behavior: 'smooth' })。
最复杂的点从来不是“怎么写”，而是“滚动到底发生在哪一层”——得先确认滚动上下文归属，再谈平滑与否。
