让固定导航不再遮挡锚点：CSS scroll-margin-top 的小魔法

在 HTML 中，当使用锚点（#id）进行导航时，浏览器默认会直接将目标元素滚动到视口顶部。然而，如果你的页面顶部有固定导航栏（如 position: fixed 的 header），那么目标元素可能会被遮挡。为了解决这个问题，你可以通过 CSS 添加滚动偏移（scroll offset），让跳转时预留一定的偏差。

实际操作中，可以通过 [id] ¹ 这样的属性选择器来选中元素，然后设置样式。

推荐方法：使用 scroll-margin-top（现代浏览器支持）

这是最简单、最现代的方法，无需 JavaScript。

示例：

css
/* 给所有带 id 的元素添加偏移 */
[id] {
  scroll-margin-top: 80px; /* 根据你固定导航栏的高度调整 */
}

这样就能给所有锚点目标统一预留 80 px 安全距离。

方法二：使用伪元素创建“隐形偏移”（兼容旧浏览器）

css
[id]::before {
  content: "";
  display: block;
  height: 80px; /* 偏移量 */
  margin-top: -80px;
  visibility: hidden;
}

方法三：使用 JavaScript 平滑滚动并手动偏移（可选）

如果你使用 JS 控制滚动（如 scrollIntoView），可以手动偏移：

javascript
document.getElementById('section1').scrollIntoView({ behavior: 'smooth' });
window.scrollBy(0, -80); // 向上偏移 80px

总结

如你有固定导航栏，首选 scroll-margin-top，一行 CSS 解决问题。