Bootstrap Scrollspy滚动监听不生效，缺少什么必要配置？

云上老周

2026-9-29

问题排查与修复方案

初始化时机错误
你当前的$('body').scrollspy({ target: '#navbar-right' , offset: 50})代码写在了$(document).ready()回调函数外部，DOM未完成加载时就执行初始化，目标元素#navbar-right还未渲染，初始化直接失效。请将这行代码移到$(document).ready()回调内部。
行内样式优先级覆盖激活类样式
你在自定义点击事件中通过.css('background-color', '#ffffff')给所有导航链接添加了行内背景色样式，行内样式优先级远高于你定义的.cmp-anchorlist .anchorlist__link.active类选择器，即使Scrollspy正确给对应链接加上了active类，背景色也会被行内的白色覆盖，看不到激活效果。
修复建议：删除点击事件中直接修改行内背景色的逻辑，改为通过添加/移除自定义激活类控制样式，或者将.cmp-anchorlist .anchorlist__link.active的样式优先级提升（如添加!important标记快速验证）。
冗余错误逻辑干扰运行
点击事件中的$("li > a.anchorlist__link").find("anchorlist__link").removeClass("anchorlist__link");逻辑完全错误，a.anchorlist__link的子元素不存在类为anchorlist__link的节点，这行代码无任何作用，后续$(this).addClass("anchorlist__link")也属于冗余操作，本身元素已携带该类，请删除这两行无用代码。
重复配置冲突
你同时在body标签上配置了data-spy="scroll"等Scrollspy属性，又通过JS代码初始化Scrollspy，二者选其一即可，避免参数冲突。