scroll-margin-top 是解决固定导航栏遮挡锚点的唯一可靠 css 方案，必须作用于目标元素（如 section#about），值等于导航栏实际占用高度（含 padding、border、box-shadow），且需避免 overflow: hidden、transform 等破坏滚动上下文的情况。
scroll-margin-top 不是“锦上添花”，而是解决固定导航栏遮挡锚点的唯一可靠 CSS 方案——前提是写对位置、设对数值。
scroll-margin-top 必须加在目标元素上，不是 body 或 nav
浏览器锚点跳转时，滚动定位的基准是目标元素（如 #contact、h2[id]）的盒模型上边缘。该属性定义的是“这个元素被滚动到视口时，它的顶部该停在哪”，只对该元素自身生效。
-
body { scroll-margin-top: 64px; }❌ —— body 不是滚动容器，也不参与锚点定位逻辑 -
nav { scroll-margin-top: 64px; }❌ —— 导航栏不是被跳转的目标，写上去完全无意义 -
:target { scroll-margin-top: 64px; }⚠️ —— Safari 偶现不触发，且无法区分不同页面的导航高度 -
section#about { scroll-margin-top: 64px; }✅ —— 直接作用于带 ID 的可定位目标，稳定生效
值必须等于导航栏的视觉总高度，不是 height
遮挡来自导航栏占据的**垂直空间总量**，包括：height + padding-top + border-top-width + box-shadow 向上扩散部分。仅看 CSS 中写的 height: 60px 极易出错。
- 用 DevTools 的 Computed 面板查导航栏实际占用高度最准
- 移动端折叠后变矮（如从 64px → 48px），写死
64px就会遮挡 - 推荐抽成 CSS 变量：
:root { --nav-height: 64px; }，再写#faq { scroll-margin-top: var(--nav-height); } - 避免用
%单位——它按视口宽度计算，和高度无关，必然错位
遇到 sticky 导航或 overflow: hidden 时容易失效
scroll-margin-top 对 position: sticky 导航比 scroll-padding-top 更可靠，但它依赖目标元素处于标准流内。以下情况会直接让它失效：
- 目标元素父容器设了
overflow: hidden或clip-path—— 切断滚动上下文链路 - 目标元素本身是
display: inline或flex—— 它不是块级流内元素，浏览器无法准确计算其滚动吸附点 - 用了
transform: translateY()调整目标位置 —— 创建新包含块，破坏定位上下文 - 目标元素没设置
id或name属性 —— 浏览器根本不识别它是锚点
scroll-margin-top 和 scroll-padding-top 别混用
两者机制不同，但最终都影响滚动终点位置。同时存在会叠加偏移，导致目标元素被顶出视口。
-
html { scroll-padding-top: 64px; }+#pricing { scroll-margin-top: 20px; }→ 实际上移 84px - 全局统一高度且无响应式变化 → 优先用
html { scroll-padding-top: ... } - 仅个别区块需微调，或导航高度不一致（如首页有 banner）→ 必须用
scroll-margin-top逐个控制 - 不要试图用 JS 动态修改这些值——它们不支持运行时重计算，改了也无效
最容易被忽略的，其实是目标元素是否真的“能被锚点识别”：没有 id、被 overflow: hidden 包裹、或用了 transform，都会让 scroll-margin-top 彻底沉默——它不报错，只是什么也不做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
