Bootstrap Scrollspy功能失效问题排查求助

我来帮你排查下Scrollspy失效的几个关键问题，结合你的代码逐一分析：

1. 导航链接缺少核心的nav-link类 #

Bootstrap的Scrollspy需要识别可交互的导航链接，你的<a>标签没有添加nav-link类，这会导致Scrollspy无法定位到对应的导航项。修改导航链接代码如下：

<li class="nav-item">
  <a class="nav-link" id="title_boutTheCompany" href="#link-aboutTheCompany">Company</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="#link-staff" id="title_Team">Team</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="#link-contacts" id="title_Contact">Contacts</a>
</li>
<li class="nav-item dropdown" style="border: none;">
  <a class="nav-link" href="#link-freeTime" id="title_freeTime">Free time</a>
</li>

2. 激活状态的CSS选择器错误 #

你当前的SCSS用了li:active > a，但Bootstrap Scrollspy是给激活的导航项添加.active类（默认会加到.nav-item或.nav-link上），需要修改选择器匹配正确的激活状态：

// 针对激活的nav-item下的链接
.nav-item.active > a {
  display: block;
  color: red;
  text-decoration: underline;
}

// 或者直接针对激活的nav-link
.nav-link.active {
  color: red;
  text-decoration: underline;
}

3. 初始化方式冲突 #

你已经在<body>上添加了data-spy="scroll" data-target=".navbar"声明式属性，这已经完成了Scrollspy的初始化，不需要再用$('#navbar').scrollspy();重复初始化，反而可能导致冲突。可以二选一：

• 移除JS初始化代码，保留body上的data属性；
• 移除body上的data属性，改用JS初始化（需确保在DOM加载完成后执行）：

$(document).ready(function() {
  $('body').scrollspy({ target: '.navbar', offset: 150 });
});

4. 锚点元素的位置偏移问题 #

你的锚点是空的<div class="anchor" id="xxx"></div>，加上navbar是fixed-top，会导致滚动触发位置不准确。建议给锚点添加偏移样式：

.anchor {
  position: relative;
  top: -150px; /* 和你设置的data-offset值一致 */
  visibility: hidden;
}

这样锚点会偏移到navbar上方，滚动到对应内容区域时就能正确触发激活状态。

最后检查依赖顺序 #

确保脚本加载顺序为：jQuery → Bootstrap JS → 自定义JS，因为Scrollspy依赖jQuery，顺序错误会直接导致功能失效。

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