点击Bootstrap导航栏锚点链接后导航栏上移的问题如何解决

问题成因 #

这是使用固定定位导航栏的Bootstrap站点的典型锚点跳转异常，核心原因如下：

• 你使用的模板导航栏默认是fixed-top固定定位，这类元素会脱离正常文档流，不会占据页面实际高度。浏览器默认锚点跳转逻辑是直接将目标元素的顶部对齐浏览器视口的顶部，滚动后目标内容会顶到导航栏原本的位置，导致导航栏被挤出可视区域，同时目标内容的开头部分也会被导航栏遮挡。
• 如果模板自带了自定义平滑滚动JS逻辑，没有适配固定导航栏的高度做偏移修正，也会出现这个问题。

修复方案 #

方案1：纯CSS全局适配（最推荐，操作最简单） #

直接给页面根元素设置滚动偏移量，偏移值设置为你的导航栏实际高度即可，适配所有锚点跳转：

html {
  /* 数值根据你的导航栏实际高度调整，可多留2-5px的边距更美观 */
  scroll-padding-top: 70px; 
  /* 可选：添加平滑滚动效果 */
  scroll-behavior: smooth;
}

如果只需要适配单个#aboutUs锚点，也可以单独给目标元素设置内边距和负边距抵消偏移：

#aboutUs {
  padding-top: 70px;
  margin-top: -70px;
}

方案2：修改锚点跳转JS逻辑 #

如果模板自带了锚点跳转的JS脚本，找到对应的代码，在计算滚动位置时减去导航栏的高度即可，参考代码如下：

// 绑定所有导航栏锚点链接的点击事件
document.querySelectorAll('.navbar .nav-link[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const targetEl = document.querySelector(this.getAttribute('href'));
    // 获取导航栏的实际高度
    const navHeight = document.querySelector('.navbar').offsetHeight;
    // 滚动位置减去导航栏高度修正偏移
    window.scrollTo({
      top: targetEl.offsetTop - navHeight,
      behavior: 'smooth'
    });
  });
});

方案3：使用Bootstrap原生配置 #

如果你使用的是Bootstrap 5.2及以上版本，可以直接给导航栏元素添加属性配置滚动偏移，无需额外写代码：

<nav class="navbar fixed-top" data-bs-scroll="true" data-bs-offset="70">
<!-- 导航栏内容 -->
</nav>

内容的提问来源于stack exchange，提问作者Nancy A