scroll-margin-top能精准避开fixed导航栏，是因为它修正浏览器锚点滚动的“吸附点”，将目标元素顶部对齐线下移指定距离，不改布局、不触发重排，且原生支持smooth滚动。
因为它直接修正浏览器锚点滚动的“吸附点”，不改布局、不触发重排，且原生支持 smooth 滚动。
scroll-margin-top 为什么能精准避开 fixed 导航栏
浏览器默认把锚点元素的顶部边缘对齐到视口顶部——这是规范行为，不是 bug。而 scroll-margin-top 的作用，是让这个“对齐目标线”下移指定距离，相当于告诉浏览器：“别停在顶边，停在这条线下面 Npx”。它不改变元素位置、不影响父容器高度、也不干扰无障碍读取，纯属滚动定位逻辑层的微调。
常见误判：margin-top 或 padding-top 是布局偏移，会撑开空间、影响打印样式和屏幕阅读器；scroll-margin-top 只参与滚动计算，DOM 和渲染树完全不变。
必须加在目标元素上，写错位置就等于没写
它只对带 id 的锚点目标生效，比如 #about、h2[id] 或 section[id]。写在其他地方一律无效：
-
body { scroll-margin-top: 64px; }❌ —— body 不是锚点滚动的“吸附主体” -
nav { scroll-margin-top: 64px; }❌ —— 导航栏不是被跳转的目标 -
:target { scroll-margin-top: 64px; }⚠️ —— Safari 偶现失效，且无法响应不同页面导航栏高度变化
正确写法示例：#faq { scroll-margin-top: var(--nav-height); }，配合 :root { --nav-height: 64px; } 统一管理。
数值必须严格匹配导航栏真实视觉高度
这个值不是“大概估”，而是要等于导航栏实际占据的垂直空间，包括：
- CSS
height+padding-top+border-top-width - 若有
box-shadow向上扩散，也得算进去 - 移动端折叠后变矮？不能写死
64px，要用媒体查询或clamp()
最准的方法：DevTools → 选中导航栏 → Computed 面板里看所有向上方向的占用总和。单位建议统一用 px 或 rem，避免混用导致缩放偏差。
容易被忽略的三个失效场景
即使写对了选择器和数值，以下情况仍会导致 scroll-margin-top 不起作用：
- 目标元素
id以数字开头（如id="1section"），部分浏览器静默忽略，应改为id="section-1" - 目标元素尚未挂载到 DOM（React/Vue 异步组件、CodeMirror 初始化前），浏览器找不到节点
- 目标或其任意父容器设置了
overflow: hidden、display: none或visibility: hidden，滚动上下文被截断
浮动塌陷也会让它失效：若目标父容器内有未清除的 float，getBoundingClientRect() 返回的位置失真，此时需加 display: flow-root 修复容器高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
