Bootstrap页面内锚点跳转定位偏移问题求助

以下是几个实用的解决方案：

方案1：使用CSS scroll-padding-top（推荐，Bootstrap 5+） #

直接给body设置scroll-padding-top，值等于你的fixed-top导航栏高度，现代浏览器会自动为锚点滚动预留空间，无需额外修改DOM：

body {
  scroll-padding-top: 70px; /* 替换为你的导航栏实际高度 */
}

方案2：给锚点目标添加偏移样式 #

给需要跳转的目标区块添加一个自定义类，通过内边距和负外边距组合实现偏移，不影响原有布局：

.anchor-offset {
  padding-top: 70px;
  margin-top: -70px;
}

然后将类应用到目标元素上：

<section id="target-section" class="anchor-offset">
  <!-- 区块内容 -->
</section>

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

如果需要兼容旧浏览器或实现平滑滚动，可以通过监听锚点点击事件，手动计算并调整滚动位置：

// 监听所有锚点链接点击
document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href');
    const target = document.querySelector(targetId);
    if (!target) return;
    
    // 获取导航栏高度
    const navbarHeight = document.querySelector('.navbar.fixed-top').offsetHeight;
    // 计算目标位置（减去导航栏高度）
    const scrollToPosition = target.getBoundingClientRect().top + window.pageYOffset - navbarHeight;
    
    // 执行滚动
    window.scrollTo({
      top: scrollToPosition,
      behavior: 'smooth' // 可选，开启平滑滚动
    });
  });
});

内容的提问来源于stack exchange，提问作者Alex Toucan