scroll-behavior: smooth 必须作用于实际滚动容器（如 html 或自定义滚动区），写错容器、被 !important 覆盖、目标元素不可见或不在同一滚动流，均导致瞬移；scroll-margin-top 用于避开固定头部遮挡。
直接加 html { scroll-behavior: smooth; } 就能生效，但多数人卡在它“没反应”——根本原因不是写法错，而是滚动容器判断错了、或被覆盖了。
为什么写了 scroll-behavior: smooth 却还是瞬移？
浏览器只对「实际发生滚动的容器」应用该属性，而这个容器不一定是 html 元素本身：
- 如果页面用
.main-content { overflow-y: auto; height: 100vh; }做局部滚动区，scroll-behavior必须写在.main-content上，而不是html； -
html { scroll-behavior: smooth; }只对整个视口滚动有效，但一旦你用了position: fixed头部 + 内容区自定义滚动，视口就不再承担滚动职责； - 第三方 CSS（比如某些 UI 框架重置样式）可能写了
html, body { scroll-behavior: auto !important; }，直接覆盖你的设置； - Safari ≤15.4 对
html上的该属性支持不稳定，iOS 16+ 前甚至完全忽略，必须补body { scroll-behavior: smooth; }才能兜底。
scroll-margin-top 是干什么的？
固定头部（如 position: sticky 的导航栏）会遮住锚点目标，导致内容被盖住。这不是 scroll-behavior 的问题，而是滚动终点计算没留出偏移量：
- 给目标元素加
scroll-margin-top: 80px;（值等于头部高度），浏览器会把“滚动到该元素顶部”的位置自动上移 80px； - 不能只靠
padding-top或margin-top模拟，那些影响布局流，而scroll-margin-top仅作用于滚动定位逻辑； - 如果头部是响应式高度（比如移动端变矮），建议用
clamp()或媒体查询动态调整：scroll-margin-top: clamp(60px, 8vw, 100px);。
锚点目标必须满足哪些条件？
:target 和 scroll-behavior 都依赖目标元素真实存在于 DOM 中且可被定位：
- ID 必须合法：不能以数字开头，不能含空格或特殊符号，比如
id="1section"是无效的，应改为id="section-1"； - 目标不能被
display: none、visibility: hidden或父级overflow: hidden遮挡，否则浏览器无法测量其位置； - 若目标在 Shadow DOM 内（比如 Web Component 中），
scroll-behavior无法穿透，需 JS 调用element.scrollIntoView({ behavior: 'smooth' })显式触发； - SPA 路由中，目标元素可能尚未渲染（比如懒加载区块），需确保 hash 变更后目标已挂载，否则首次点击会失败。
最常被忽略的是滚动上下文的归属——不是“页面有没有写 scroll-behavior”，而是“这个行为到底作用在哪个滚动容器上”。检查时先打开开发者工具，选中 html 元素看 computed 样式里的 scroll-behavior 是否为 smooth 且无 !important 覆盖；再确认目标元素是否在同一个滚动流里。这两步没做对，后面所有动画都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
