通过设置 CSS 的 scroll-padding-top 属性，可让浏览器在锚点滚动时自动预留顶部间距，确保目标元素完整可见，避免被固定定位的导航栏遮盖。
通过设置 css 的 `scroll-padding-top` 属性，可让浏览器在锚点滚动时自动预留顶部间距，确保目标元素完整可见，避免被固定定位的导航栏遮盖。
当页面包含固定在顶部的导航栏（如 position: fixed; top: 0）时，使用原生锚点链接（例如 <a href="#page1">跳转</a> 配合 <div id="page1">内容</div>）会导致滚动后目标元素的顶部与视口顶端对齐——结果就是目标内容被导航栏完全覆盖，用户体验严重受损。
这个问题的根本原因在于：浏览器默认的滚动行为将锚点元素的上边界精确对齐到视口顶部边缘，而未考虑页面中已存在的固定布局组件。
✅ 推荐解决方案：使用现代 CSS 的 scroll-padding-top
只需在根元素上设置 scroll-padding-top，即可为所有锚点滚动操作统一添加顶部偏移量：
html {
scroll-padding-top: 140px; /* 值应等于导航栏高度（含 padding/border） */
}该属性会告诉浏览器：“在执行滚动定位时，请将目标元素的顶部对齐到距离视口顶部 140px 的位置”，从而自然避开导航栏。
? 注意事项：
- scroll-padding-top 兼容性良好：Chrome 89+、Firefox 90+、Safari 15.4+、Edge 89+ 均已支持（caniuse.com）；
- 推荐使用 html 选择器而非 body，因滚动容器通常是根元素；
- 若导航栏高度动态变化（如响应式折叠），可配合 CSS 自定义属性实现灵活适配：
:root {
--navbar-height: 140px;
}
html {
scroll-padding-top: var(--navbar-height);
}
/* 响应式调整示例 */
@media (max-width: 768px) {
:root {
--navbar-height: 80px;
}
}? 替代方案（不推荐优先使用）：
- JavaScript 手动滚动（需监听 hashchange、计算 offset、调用 element.scrollIntoView()），代码冗余且易出错；
- 伪元素 + margin-top 技巧（如在 #page1::before 上设负 margin 和 padding），语义混乱且影响 DOM 结构判断。
总结：scroll-padding-top 是 W3C 标准化、声明式、零 JS 依赖的优雅解法。正确设置后，所有锚点跳转（包括前进/后退按钮、URL 直接访问）均自动生效，是现代前端布局中处理“固定导航遮挡锚点”问题的标准实践。
