JavaScript中active类逻辑覆盖回到顶部滚动函数的修复方法

开发者阿泽

2026-8-28

问题根因

直接对window.onscroll属性赋值绑定事件时，后赋值的处理函数会完全覆盖之前绑定的逻辑。你写的导航高亮滚动监听覆盖了之前控制回到顶部按钮显隐的监听，导致按钮的显隐判断逻辑完全不执行，所以按钮消失。

修复方法

放弃直接给onscroll赋值的事件绑定方式，改用addEventListener注册滚动监听器，该方法支持给同一个事件绑定多个互不干扰的处理函数，两段功能可以同时正常运行。

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

// 初始化获取DOM元素，避免滚动回调中反复查询
const mybutton = document.getElementById("btnTop");
const navBar = document.querySelector("nav"); // 替换为你项目中实际的导航栏选择器

// 绑定回到顶部按钮显隐逻辑
window.addEventListener('scroll', () => {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
});

// 绑定导航区块高亮逻辑
window.addEventListener('scroll', () => {
  document.querySelectorAll("section").forEach(section => {
    const activeLink = navBar.querySelector(`[data-nav=${section.id}]`);
    // 跳过无对应导航项的区块，避免报错
    if (!activeLink) return;
    const rectTop = section.getBoundingClientRect().top;
    if (rectTop >= -400 && rectTop <= 150) {
      section.classList.add("your-active-class");
      activeLink.classList.add("active-link");
    } else {
      section.classList.remove("your-active-class");
      activeLink.classList.remove("active-link");
    }
  });
});

// 回到顶部点击逻辑
function topFunction() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
}
// 给按钮绑定点击事件
mybutton.addEventListener('click', topFunction);

可选优化