scroll-margin-top能修正锚点偏移，是因为它在浏览器原生锚点滚动时，将目标元素顶部对齐视口顶部的默认行为改为对齐至视口顶部向下偏移指定距离的位置，从而避开fixed导航栏遮挡；该属性必须直接作用于带id的目标元素（如h2[id]），数值须严格匹配导航栏实际高度（含padding、border），写在body或父容器上无效。
scroll-margin-top 为什么能修正锚点偏移
浏览器原生锚点滚动，是把目标元素的 top 边缘对齐视口顶部。一旦页面有 position: fixed; top: 0; 的导航栏，目标内容就会被盖住——这不是 bug，是规范行为。而 scroll-margin-top 是浏览器在计算“对齐终点”时，主动向上预留的空间，它直接参与滚动定位逻辑，不改变布局流，也不影响其他元素位置。
怎么写 scroll-margin-top 才生效
必须作用在目标元素自身上，且要匹配其 id 或属性选择器；写在 body 或父容器上完全无效。
-
h2[id]、h3[id]这类通用选择器最稳妥，覆盖所有带id的标题 - 数值必须等于你的固定头部实际高度（含
padding和border），比如scroll-margin-top: 72px; - 不要用
margin-top或padding-top撑开目标元素——响应式下容易错位，且可能触发重排 - 若不同断点 header 高度不同，用媒体查询覆盖：
@media (max-width: 768px) { h2[id] { scroll-margin-top: 56px; } }
哪些场景下 scroll-margin-top 不起作用
它只解决“滚动终点偏移”，不是万能胶。以下情况即使加了也白搭：
- 目标元素
id以数字开头（如id="1section"），部分浏览器静默忽略，改用id="section-1" - 目标元素尚未挂载到 DOM（如 React/Vue 异步组件、CodeMirror 初始化前），浏览器找不到节点
- 目标或其任意父容器设置了
overflow: hidden、display: none或visibility: hidden，滚动上下文被截断 - 用了单页应用路由（Vue Router / React Router v6+），
href="#xxx"被框架拦截，根本没触发原生锚点逻辑
兼容旧版 Safari 的兜底方案
Safari 15.4 之前不支持 scroll-margin-top，需 JS 补偿，但不能简单监听 hashchange 就立刻 scrollBy——DOM 可能还没就绪，且快速点击会重复触发。
推荐写法：
window.addEventListener('hashchange', () => {
setTimeout(() => {
const el = document.querySelector(location.hash);
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}, 50);
});注意首次加载也要手动调用一次，否则直接访问带 hash 的 URL 不会滚动。
真正卡住人的，从来不是属性怎么写，而是你加了 scroll-margin-top 却忘了检查目标元素是否真在 DOM 里、是否被 overflow: hidden 包着、或者框架早就悄悄把你的 # 当成路由路径处理了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
