使用 CSS 的 scroll-margin-top 属性可轻松为锚点目标元素设置顶部偏移，使页面滚动后内容不被 sticky 导航栏遮挡，无需 JavaScript 即可实现平滑、语义化且兼容性良好的解决方案。
使用 css 的 `scroll-margin-top` 属性可轻松为锚点目标元素设置顶部偏移，使页面滚动后内容不被 sticky 导航栏遮挡，无需 javascript 即可实现平滑、语义化且兼容性良好的解决方案。
当页面包含 position: sticky; top: 0 的导航栏时，点击 类型的锚点链接会将目标元素（如
推荐方案：CSS scroll-margin-top（现代、简洁、原生支持）
该属性专为此类场景设计：它定义元素在作为滚动目标时，其“滚动边界”距离视口顶部的预留空间。浏览器会在自动滚动定位时，自动将该偏移量纳入计算，确保目标内容完整可见。
✅ 示例代码（推荐写法）：
/* 启用全局平滑滚动（可选但体验更佳） */
html {
scroll-behavior: smooth;
}
/* 固定导航栏 */
nav {
position: sticky;
top: 0;
height: 3rem; /* 假设导航栏高度为 48px */
background: white;
z-index: 1000;
}
/* 为所有锚点目标区域设置顶部安全边距 */
section[id] {
scroll-margin-top: 4rem; /* 推荐使用 rem/em 等相对单位，适配缩放 */
}✅ 优势说明：
- 零 JS 依赖：纯 CSS 方案，轻量、可靠、无执行时机问题；
- 语义清晰：偏移逻辑绑定在目标元素自身，符合“关注点分离”原则；
- 响应式友好：配合 rem 或 vh 单位可自动适配不同设备；
- 浏览器支持良好：Chrome 99+、Firefox 97+、Safari 15.4+、Edge 99+ 均已支持（Can I use）。
⚠️ 注意事项：
- 避免对 body 或 html 直接设置 margin-top/padding-top 来模拟偏移——这会破坏文档流布局，可能引发高度计算异常或滚动条抖动；
- 若需兼容旧版浏览器（如 Safari
- scroll-margin-top 的值建议与导航栏实际高度一致（如 4rem ≈ 64px），若导航栏高度动态变化（如响应式折叠），可通过 CSS 自定义属性 + @media 动态更新。
? 小技巧：你还可以为不同层级的锚点设置差异化偏移，例如：
/* 主要章节使用较大偏移 */
section.h1-section { scroll-margin-top: 5rem; }
/* 子标题区域使用较小偏移 */
h2[id] { scroll-margin-top: 3.5rem; }综上，scroll-margin-top 是解决“sticky 头部遮挡锚点内容”问题的首选方案——简洁、标准、高效。只需为带 id 的目标元素添加一行 CSS，即可让锚点滚动精准、优雅、开箱即用。
