HTML5锚点跳转被置顶导航栏遮挡的无JS无结构修改解决方案

最优方案：使用scroll-margin-top属性 #

这是完全匹配你需求的解决方案——无需修改HTML结构，纯CSS实现，不需要任何JavaScript。

核心逻辑是给所有锚点目标元素（带ID的元素）设置顶部滚动边距，数值等于你的粘性导航栏高度：

/* 假设导航栏高度为80px，可根据实际调整 */
[id] {
  scroll-margin-top: 80px;
}

如果只想针对特定锚点元素，也可以单独指定：

#obj-id, #another-target {
  scroll-margin-top: 80px;
}

这个属性属于CSS滚动快照规范，现代浏览器（Chrome、Firefox、Safari 14.1+、Edge）都原生支持。它会让浏览器在定位锚点时，自动给目标元素顶部预留设定的偏移空间，刚好避开顶部的粘性导航栏。

兼容旧浏览器的备选方案 #

如果需要兼容不支持scroll-margin-top的旧浏览器（比如IE），可以采用负边距+内边距的技巧：

:target {
  /* 预留导航栏高度的内边距 */
  padding-top: 80px;
  /* 用负边距抵消内边距对布局的影响 */
  margin-top: -80px;
}

注意：这个方法要求目标元素是块级元素，且元素本身无独立背景（或背景与父容器一致），否则内边距区域会显示额外背景，影响视觉效果。

为什么之前的尝试无效？ #

• 给外层div设边距：锚点跳转基于目标元素的位置计算，外层容器的边距不会改变锚点的定位逻辑，因此无效。
• 内部div单独滚动：这种方案会改变页面的滚动上下文，导致滚动条仅出现在内部容器上，破坏整体视觉体验，并非理想选择。

内容的提问来源于stack exchange，提问作者Felix Stupp