scroll-margin-top 必须写在目标元素上，值要严格匹配当前设备下顶栏的真实视觉高度，否则锚点仍会被遮挡；它仅对该元素生效，不参与布局，写在 body 或 main 上无效。
scroll-margin-top 必须写在目标元素上，值要严格匹配当前设备下顶栏的真实视觉高度，否则锚点仍会被遮挡。
为什么 scroll-margin-top 要作用于目标元素本身
浏览器锚点跳转时，会把目标元素的盒模型顶部对齐到视口顶部。固定顶栏盖在上面，是因为这个“对齐点”没偏移。scroll-margin-top 的作用就是告诉浏览器：“把这个元素的顶部，对齐到视口顶部往下 Npx 的位置”。它只对该元素生效，不参与布局、不触发重排。
- 写在
body或main上完全无效 —— 它们不是滚动定位的目标主体 -
:target看似省事，但在 Safari 中偶现失效，且无法区分不同页面的顶栏高度 - 正确写法示例：
h2[id]、section[id]、#faq-3这类实际带id的可跳转元素
响应式场景下怎么设值才准
桌面端顶栏可能是 64px，移动端折叠后变成 48px，硬写死一个值必然出错。关键不是“动态改 CSS”，而是用 CSS 变量 + 媒体查询提前声明好所有可能的高度。
- 先定义变量：
:root { --nav-height: 64px; } - 再用媒体查询覆盖：
@media (max-width: 768px) { :root { --nav-height: 48px; } } - 最后应用到目标元素：
h2[id], #contact { scroll-margin-top: var(--nav-height); } - 单位必须统一：顶栏用
rem定义高度，这里也用rem；若顶栏用px，这里就别混用em或%
容易被忽略的渲染干扰点
很多 HTML 编辑器（尤其是富文本或低代码平台）会自动包裹内容、注入内联样式，导致你写的 scroll-margin-top 被更高优先级规则覆盖，或者根本没命中目标元素。
- 打开开发者工具，选中目标元素，看
Computed面板里scroll-margin-top是否生效、是否被!important或编辑器 class 覆盖 - 检查目标元素是否被父容器设置了
overflow: hidden或transform，这会导致滚动上下文变更，使scroll-margin-top失效 - 避免和
scroll-padding-top混用：如果已在html上设了scroll-padding-top，再给目标元素加scroll-margin-top会叠加偏移，反而多留白
真正难的不是写这行 CSS，而是量准那个“刚好不遮”的像素值 —— 它得包含顶栏的 border-top、padding-top、甚至阴影扩散范围，而不仅是你写的 height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
