从其他页面跳转访问时Bootstrap 5 scrollspy原生JS实现失效求助

现有代码错误原因 #

• 第一段代码问题：
  1. activeId是拼接出来的选择器字符串，本身没有addEventListener方法，必须先通过DOM查询获取到对应的元素对象才能绑定事件
  2. 绑定的是空的点击回调函数，就算绑定成功也不会触发任何跳转、激活导航的逻辑
• 第二段代码问题：
  1. document.querySelector()返回的是匹配到的单个DOM元素，不是集合，不需要加[0]取值，加了之后会得到undefined，调用.click()直接抛出报错
  2. 没有做元素存在性判断，如果匹配不到对应导航元素会直接报错
  3. 没有考虑执行时机：如果代码在DOM还没加载完成、或者Bootstrap scrollspy还没初始化完成的时候就执行，也会找不到元素或者触发无效

修复后可运行代码 #

确保代码在DOM加载完成、Bootstrap组件初始化完成之后执行即可：

function fixScrollSpy() {
  // 拆分url获取锚点部分
  const urlParts = window.location.href.split("#");
  if (urlParts.length < 2 || !urlParts[1]) return;
  
  const targetNavSelector = `#nav-deep-${urlParts[1]}`;
  const targetNavEl = document.querySelector(targetNavSelector);
  // 先判断元素是否存在，避免报错
  if (!targetNavEl) return;
  
  // 触发导航点击，激活scrollspy对应状态，同时触发默认锚点跳转
  targetNavEl.click();
  
  // 可选补充：如果固定导航栏遮挡了内容顶部，可以自行调整滚动偏移量，80为导航栏高度，按需修改
  // const targetContentEl = document.getElementById(urlParts[1]);
  // if (targetContentEl) {
  //   const offsetTop = targetContentEl.offsetTop - 80;
  //   window.scrollTo({
  //     top: offsetTop,
  //     behavior: 'smooth'
  //   })
  // }
}

// DOM加载完成后执行，如果scrollspy初始化时机较晚可以换成window.addEventListener('load', fixScrollSpy)
document.addEventListener('DOMContentLoaded', fixScrollSpy);

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