本文介绍使用 CSS scroll-margin-top 属性实现锚点点击后自动留出顶部安全距离的现代方案，完美解决 sticky 导航栏遮挡目标内容的问题，无需 JavaScript 即可完成平滑、语义化、可维护的滚动偏移。
本文介绍使用 css `scroll-margin-top` 属性实现锚点点击后自动留出顶部安全距离的现代方案，完美解决 sticky 导航栏遮挡目标内容的问题，无需 javascript 即可完成平滑、语义化、可维护的滚动偏移。
在构建带有固定顶部导航栏（position: sticky; top: 0）的单页网站时，一个常见痛点是：点击目录中的锚点链接（如 © INFO）后，浏览器原生滚动会将目标元素（如
传统“打补丁”式方案（如在目标元素上方插入空 div、用 JS 监听 hashchange 并手动 scrollBy）不仅破坏语义结构，还增加维护成本与兼容性风险。而现代标准提供了一个简洁、声明式、纯 CSS 的解决方案：scroll-margin-top。
该属性定义了元素在作为滚动目标时，其上边缘与视口顶部之间应保留的空白距离。它直接作用于带 ID 的目标元素（如 section#info），浏览器原生滚动行为（包括点击锚点、Element.scrollIntoView() 或 history.scrollRestoration）均会尊重该偏移。
✅ 推荐写法（推荐配合 scroll-behavior: smooth 提升体验）：
html {
scroll-behavior: smooth; /* 启用全局平滑滚动（可选但强烈建议） */
}
/* 假设导航栏高度为 4rem（即 64px） */
section {
scroll-margin-top: 4rem;
}
⚠️ 注意事项：
- scroll-margin-top 的值支持任意 CSS 长度单位（px, rem, em, % 等），推荐使用 rem 以保持与根字体大小一致的响应性；
- 该属性需作用于被滚动到的目标元素本身（即 id="info" 所在的元素），而非父容器或导航栏；
- 浏览器兼容性良好：Chrome 69+、Firefox 68+、Safari 15.4+、Edge 79+（Can I use 数据）；旧版浏览器会优雅降级为默认滚动（无偏移），不影响功能可用性；
- 若页面存在多类锚点目标（如 article、div.section、main），可统一设置，或使用更精确的选择器（如 section[id]）避免误匹配。
? 进阶技巧：
当导航栏高度动态变化（如响应式折叠/展开）时，可结合 CSS 自定义属性实现灵活适配：
:root {
--navbar-height: 4rem;
}
nav {
height: var(--navbar-height);
}
section {
scroll-margin-top: calc(var(--navbar-height) + 0.5rem); /* 额外预留半行间距更舒适 */
}
综上，scroll-margin-top 是解决“固定导航栏遮挡锚点”问题的现代、标准、高效方案。它将滚动逻辑从 JavaScript 移至样式层，提升性能、可维护性与可访问性，是构建专业单页应用不可或缺的 CSS 工具之一。
