Bootstrap 4固定顶部导航栏遮挡锚点内容的解决方法咨询

针对固定顶部导航栏导致锚点标题被遮挡的问题，这里有几个实用的解决方案：

方案1：使用CSS scroll-margin-top（推荐） #

这是最简洁的现代解决方案，直接给锚点元素设置顶部滚动边距，值等于导航栏的高度（和你设置的body padding-top一致，这里是70px）：

1. 更新锚点写法（<a name>已过时，直接用id绑定到标题元素）：

<h2 id="anchor1">Anchor 1</h2>
<h2 id="anchor2">Anchor 2</h2>
<!-- 其他锚点同理 -->

2. 添加CSS样式：

/* 给所有锚点标题设置滚动边距 */
h2 {
  scroll-margin-top: 70px;
}

或者给锚点元素单独加类，方便精准控制：

.anchor-target {
  scroll-margin-top: 70px;
}

对应标题写法：

<h2 id="anchor1" class="anchor-target">Anchor 1</h2>

优点：无需额外HTML元素，代码简洁，原生支持，滚动体验自然。

方案2：使用偏移锚点容器 #

通过一个隐藏的偏移元素定位，确保标题显示在导航栏下方：

1. 在每个标题前添加空的锚点容器：

<div id="anchor1" class="anchor-offset"></div>
<h2>Anchor 1</h2>

<div id="anchor2" class="anchor-offset"></div>
<h2>Anchor 2</h2>

2. 添加CSS样式：

.anchor-offset {
  position: relative;
  /* 偏移量等于导航栏高度 */
  top: -70px;
  visibility: hidden;
}

这个元素会占据导航栏高度的空间但不显示，浏览器跳转时会定位到该元素位置，标题自然出现在可见区域。

优点：兼容性极佳，支持所有浏览器（包括旧版）。

方案3：JavaScript手动调整滚动位置 #

如果需要更灵活的控制（比如导航栏高度动态变化），可以用JS监听锚点点击事件，手动调整滚动位置：

// 监听所有锚点链接的点击事件
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    
    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);
    
    if (targetElement) {
      // 计算滚动目标位置：元素顶部位置 - 导航栏高度
      const navbarHeight = document.querySelector('.navbar').offsetHeight;
      const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navbarHeight;
      
      // 平滑滚动到目标位置
      window.scrollTo({
        top: targetPosition,
        behavior: 'smooth'
      });
      
      // 更新URL哈希（可选）
      history.pushState(null, null, targetId);
    }
  });
});

优点：支持动态调整，适合导航栏高度变化的场景；可添加平滑滚动效果。

注意事项 #

• 确保导航栏高度和设置的偏移量一致（这里是70px），如果导航栏高度变化，需同步调整对应的值。
• 方案1中的scroll-margin-top支持Chrome 69+、Firefox 68+、Edge 79+，若需兼容更旧浏览器，优先选择方案2。

内容的提问来源于stack exchange，提问作者S. Imp