scroll-padding-top是根治方案，必须设在html上以解决锚点跳转后内容被fixed导航栏遮挡问题；它通过调整滚动终点而非推内容来适配，需配合自定义属性实现响应式高度统一。
scroll-padding-top 是根治方案，必须设在 html 上
锚点跳转后内容被 position: fixed 导航栏盖住，不是 bug，是浏览器规范行为：它把目标元素的 padding-box 上边缘对齐到视口顶部（y=0），完全不感知 fixed 元素的存在。解决方式不是推内容，而是改滚动终点。
给 html 元素加 scroll-padding-top，值等于导航栏真实高度（含 padding、border）：
html {
scroll-padding-top: 64px;
}
- 这个属性作用于整个文档滚动容器，所有
#section-1类型的锚点跳转都会自动偏移 - 不能写在
body上——body不是根滚动上下文，该属性无效 - Chrome 69+、Firefox 68+、Safari 15.4+、Edge 79+ 均支持；旧版 Safari 可用
@supports降级
scroll-margin-top 适合局部微调，每个目标元素都得手动加
当只有部分标题需要避让（比如只有一级 <h2> 要露出，二级 <h3> 不用），或导航栏高度响应式变化时，scroll-margin-top 更灵活。
直接给目标元素设：
立即学习“前端免费学习笔记（深入）”；
h2[id] {
scroll-margin-top: calc(var(--nav-height) + 8px);
}
- 值建议略大于导航栏高度，留出呼吸空间，避免紧贴底部
- 该属性不继承，
h2、div#faq、section[data-id="contact"]都得单独设置 - iOS Safari 直到 15.4 才支持，旧版本需 JS 降级（监听
scroll+getBoundingClientRect()手动补偿）
别用 margin-top 推内容，它会破坏锚点定位逻辑
给 body 或主容器加 margin-top 看似简单，但实际埋雷：
- Safari 和部分安卓 WebView 中，
margin-top会导致scrollIntoView()计算偏移异常，跳转后上下抖动 - 如果导航栏高度动态变化（比如折叠/展开），JS 更新
margin容易滞后，造成一帧遮挡 -
margin改变的是元素自身位置，但锚点定位仍按原始 DOM 坐标计算，逻辑割裂
真正稳的解法永远是：scroll-padding-top 控制滚动终点，padding-top 在 body 或首个内容容器上预留静态空间——分工明确，互不干扰。
响应式导航高度变化时，优先用自定义属性 + padding-top 补空间
Bootstrap 的 fixed-top 或自定义响应式导航，高度在移动端和桌面端不同（比如 56px → 72px）。这时不要硬写像素值，而应配合 CSS 自定义属性：
:root {
--nav-height: 56px;
}
@media (min-width: 768px) {
:root {
--nav-height: 72px;
}
}
body {
padding-top: var(--nav-height);
}
html {
scroll-padding-top: var(--nav-height);
}
- 确保
scroll-padding-top和padding-top使用同一变量，保持一致 - 若用 JS 动态控制导航高度（如菜单展开），优先更新 CSS 变量而非内联样式，避免重排
- 注意：不要同时给
body加margin-top和padding-top，容易叠加错乱
最常被忽略的点是：以为设了 scroll-margin-top 就一劳永逸，结果忘了它不继承，也没检查 iOS Safari 版本；或者把 scroll-padding-top 错误地写在 body 上，导致全站锚点失效。这两个地方一错，整套方案就白搭。
