Bootstrap5粘性导航栏锚点跳转遮挡section，jQuery偏移无效如何修复？

你的代码不生效主要是以下几个错误：

• 锚点链接选择器写错：$('a[href*="id"]')只会匹配href包含id字符串的链接，你的导航链接href为#section1这类格式，完全匹配不到，导致绑定的点击事件根本没触发
• 滚动容器不兼容：仅给html添加滚动动画，webkit内核等部分浏览器不生效，需要同时匹配html和body
• 锚点设置逻辑错误：动画结束后直接赋值window.location.hash会触发浏览器默认锚点跳转，抵消你之前设置的偏移量
• 高度计算不准确：用height()获取导航栏高度只包含内容高度，不会计算内边距、边框，实际偏移值会有误差

方案1：修正jQuery代码（适合需要自定义滚动动画的场景） #

修改后的完整JS代码如下：

$(document).ready(function(){
  // 获取导航栏完整高度，包含内边距、边框
  var headerHeight = $("#navigation-items").outerHeight();

  // 匹配所有导航栏中指向锚点的链接
  $('.nav-link[href^="#"]').on("click", function(e) {
    // 不需要处理指向首页的#链接可以保留这个判断，否则删除即可
    if($(this).attr('href') === '#') return;
    e.preventDefault();
    const target = $(this).attr("href");
    // 计算带偏移的滚动位置
    const scrollToPosition = $(target).offset().top - headerHeight;
    // 兼容不同浏览器的滚动容器
    $('html, body').animate({
      scrollTop: scrollToPosition
    }, 300, function() {
      // 使用pushState修改地址栏hash，不会触发默认滚动
      history.pushState(null, null, target);
    })
  });
});

另外粘性导航可以直接用Bootstrap 5自带的sticky-top类，无需自己写sticky类和滚动监听逻辑，直接修改header标签即可：

<header id="navigation-items" class="sticky-top" style="width:100%; z-index: 99;">

方案2：纯CSS方案（更简洁，无需JS） #

如果不需要自定义滚动动画，用CSS原生属性即可实现锚点跳转偏移，直接添加如下CSS代码：

/* 值设置为导航栏的高度即可，原生锚点跳转自动预留偏移空间 */
html {
  scroll-padding-top: 80px;
}

该方案无需修改原有JS代码，浏览器原生锚点跳转时会自动偏移对应高度，不会出现内容被导航栏遮挡的问题。

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