本文介绍使用 CSS scroll-margin-top 属性解决锚点跳转时内容被 sticky 导航栏遮挡的问题，无需 JavaScript，兼容现代浏览器，简洁高效。
本文介绍使用 css `scroll-margin-top` 属性解决锚点跳转时内容被 sticky 导航栏遮挡的问题，无需 javascript，兼容现代浏览器，简洁高效。
当页面包含固定在顶部的导航栏（如 position: sticky; top: 0）时，点击 <a href="#section"> 锚点链接后，目标元素（如 <section id="section">）会默认紧贴视口顶部显示——结果常被导航栏覆盖，导致关键内容不可见。
最优雅、标准化的解决方案是使用 CSS scroll-margin-top 属性。它专为控制滚动定位时的“顶部留白”而设计：浏览器在执行平滑锚点滚动时，会自动将目标元素的上边缘与视口顶部保持指定距离，从而避开固定头部。
✅ 推荐方案：scroll-margin-top
只需为所有锚点目标元素（如 section、div 等含 id 的区块）设置该属性：
section {
scroll-margin-top: 4rem; /* 建议值：略大于导航栏高度 */
}若导航栏高度为 3rem，推荐设为 4rem（预留 1rem 安全间距）；若为 60px，则设为 60px 或 72px（如 scroll-margin-top: 72px）。
同时建议启用全局平滑滚动提升用户体验：
html {
scroll-behavior: smooth;
}? 注意：scroll-margin-top 作用于目标元素自身（即 #info 所在的元素），而非 a 标签或导航栏。它不改变元素布局，仅影响滚动定位逻辑。
? 兼容性说明
- ✅ 支持 Chrome 69+、Firefox 68+、Safari 15.4+、Edge 79+
- ⚠️ Safari 15.0–15.3 需加 -webkit-scroll-margin-top 前缀（可选）
- ❌ IE 不支持（需降级方案，见下文）
? 备选方案（兼容旧浏览器）
若需支持较老浏览器（如 Safari <15.4），可用 JavaScript 手动调整滚动位置：
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const targetId = this.getAttribute('href').substring(1);
const targetEl = document.getElementById(targetId);
if (targetEl) {
e.preventDefault();
const offsetTop = targetEl.getBoundingClientRect().top + window.scrollY - 80; // 减去导航栏高度（如 80px）
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
}
});
});但强烈建议优先采用 scroll-margin-top —— 它语义清晰、性能优异、无 JS 依赖，且是 W3C 标准方案。
✅ 最佳实践总结
- 将 scroll-margin-top 应用于锚点目标容器（如 section[id]），值略大于 sticky 导航栏高度；
- 配合 scroll-behavior: smooth 实现丝滑体验；
- 避免通过插入空 div、负 margin、padding 等 hack 方式解决，维护性差且易引发布局问题；
- 测试不同屏幕尺寸下的实际偏移效果，必要时使用 clamp() 或媒体查询动态调整（如 scroll-margin-top: clamp(60px, 10vh, 100px)）。
用一行 CSS，彻底告别锚点被遮挡的烦恼——现代前端开发，就该如此简洁有力。
