scroll-margin-top 必须作用于带 id 或 name 的目标锚点元素本身，写在 body、nav 或 :target 上无效；普通无 id 的 div 无法触发锚点跳转，该属性自然不生效。
scroll-margin-top 必须加在目标锚点元素上，写在 body、nav 或 :target 上完全无效——这是 90% 以上“加了没用”的根本原因。
目标元素必须带 ID 或 name 属性才能被识别为锚点
浏览器只对有 id（如 section#about）或 name（如 a name="contact"）的元素执行原生锚点跳转。如果只是个普通 div 没加 id，scroll-margin-top 再准也没机会触发。
- ✅ 正确：
<h2 id="faq">常见问题</h2>→ 可被#faq链接跳转，scroll-margin-top生效 - ❌ 错误：
<div class="section">...</div>→ 即使加了scroll-margin-top: 64px，浏览器根本不把它当锚点目标 - ⚠️ 注意：某些富文本编辑器或 CMS 会自动移除
id属性，或把 ID 转成不合法格式（如含空格、中文），需检查生成后的 HTML 源码
值必须严格等于导航栏的视觉总高度
不能只看 height，得把 padding-top、border-top-width、甚至 box-shadow 的垂直扩散一并算进去。用 DevTools 的 Computed 面板查最可靠。
- 常见漏项：
padding: 1rem 0→ 实际增加 1rem 向上空间；border-bottom: 2px solid #eee→ 不影响，但border-top就要算 - 移动端变矮时别写死：桌面导航高 64px，手机收起后只剩 48px，硬写
64px会导致手机端多留白 16px - 推荐用 CSS 变量统一管理：
:root { --nav-height: 64px; }，再写#faq { scroll-margin-top: var(--nav-height); }
父容器 overflow 或 transform 会切断滚动传播链
如果目标元素被包在 overflow: hidden、overflow: clip 或带 transform（如 translateZ(0)）的父容器里，浏览器可能无法将滚动偏移正确传递到根视口，导致 scroll-margin-top 表面生效、实际错位。
- ✅ 安全结构：
html > body > main > section#faq，无特殊overflow或transform - ❌ 高危结构：
<div style="overflow: hidden"><section id="faq">...</section></div>→ 偏移大概率失效 - 调试技巧：在 DevTools 中选中目标元素，看 Computed 标签页里
scroll-margin-top是否显示为有效值（而非被划掉）
和 scroll-padding-top 同时使用会叠加偏移
如果你在 html 上写了 scroll-padding-top: 64px，又给 #faq 加了 scroll-margin-top: 64px，最终滚动终点会比预期高 128px —— 浏览器把两个值直接相加，不是取最大值。
- 全站导航高度一致 → 优先用
html { scroll-padding-top: ... }，省事且稳定 - 只有个别区块需要微调（比如某页多一个 banner，导航变高）→ 改用
#special-section { scroll-margin-top: 120px }，并确保全局scroll-padding-top已清空 - 混用场景（如部分页面用 sticky 导航）→
scroll-margin-top更可控，因为scroll-padding-top对position: sticky响应滞后
最容易被忽略的是：目标元素有没有真正参与滚动定位链——它得是可被浏览器“看到”的锚点，且不能被父级样式静默拦截。值对不对、写在哪、有没有被覆盖，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
