通过为目标元素设置 scroll-margin-top，可在点击锚点链接跳转到指定 ID 后，自动在视口顶部预留指定间距（如 40px），避免内容被固定头部遮挡，且不影响原始布局。
通过为目标元素设置 `scroll-margin-top`，可在点击锚点链接跳转到指定 id 后，自动在视口顶部预留指定间距（如 40px），避免内容被固定头部遮挡，且不影响原始布局。
在单页导航中，当使用 <a href="#section-id"> 跳转到页面内某区块时，浏览器默认会将目标元素的顶部对齐视口顶部，这容易导致内容被 sticky 导航栏、固定 Header 遮盖。传统方案常依赖 JavaScript 监听 hashchange 或手动调整 scrollIntoView 偏移量，但现代 CSS 提供了更简洁、声明式的解决方案：scroll-margin-top。
该属性作用于目标锚点元素本身（即 id="block1" 等），它定义了该元素在滚动定位时，其“逻辑边界”向上偏移的距离。浏览器在执行平滑滚动（如点击锚点）时，会将此偏移纳入计算，确保元素实际显示位置距离视口顶部保留指定空白。
✅ 正确用法如下（仅需一行 CSS）：
.block {
margin: 40px;
padding: 40px;
background: purple;
height: 200px;
color: white;
scroll-margin-top: 40px; /* 关键：滚动后顶部预留 40px 空隙 */
}无需修改 HTML 结构，也不需要 JavaScript。所有现代浏览器（Chrome 69+、Firefox 68+、Safari 15.4+、Edge 79+）均已原生支持。
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项：
- scroll-margin-top 不影响文档流或盒模型，它仅作用于滚动行为，因此不会改变元素的实际 margin、padding 或布局；
- 若同时存在 position: sticky 的头部，建议配合 scroll-padding-top（作用于滚动容器，如 <body>）以统一滚动上下文；
- 不要与 margin-top 混淆：后者是布局属性，会撑开父容器；而 scroll-margin-top 是滚动专属偏移，纯视觉定位控制。
补充说明：若需全局控制滚动容器的“安全区域”，例如让所有锚点滚动都避开 60px 高的固定 Header，可在 <body> 上设置：
body {
scroll-padding-top: 60px;
}此时 scroll-margin-top（元素级）与 scroll-padding-top（容器级）协同生效，优先级以更接近目标元素的设置为准。
综上，scroll-margin-top 是解决锚点滚动定位偏移问题的标准化、高性能、零 JS 方案，推荐作为现代前端锚点导航的默认实践。
