添加回到顶部按钮滚动脚本后导航栏缩小滚动功能失效该如何修改

问题原因 #

window.onscroll属于DOM0级事件绑定方式，同一时间只能绑定一个回调函数，后绑定的回调会直接覆盖之前的绑定。你给出的按钮代码里写的window.onscroll1属于笔误，实际运行的代码中你应该是给window.onscroll绑定了按钮显隐的回调，直接覆盖了之前导航栏的滚动回调，所以导航栏功能失效。

解决方法 #

有两种常用的修复方案：

方案1：合并滚动回调逻辑

把两个功能的滚动判断逻辑放到同一个onscroll回调中，删除重复的window.onscroll绑定：

window.onscroll = function() {
  // 导航栏缩小逻辑
  const el = document.getElementsByClassName('header')[0];
  const className = 'small';
  if (el.classList) {
    window.scrollY > 10 ? el.classList.add(className) : el.classList.remove(className);
  }
  // 回到顶部按钮显隐逻辑
  scrollFunction();
};

原有按钮代码中的window.onscroll = function() {scrollFunction()}行直接删除即可。

方案2：使用addEventListener绑定事件（更推荐）

addEventListener支持给同一个事件绑定多个回调，不会出现覆盖问题，后续新增滚动逻辑也不用修改原有代码：

1. 修改导航栏的滚动绑定：

// 替换原有的window.onscroll = function() {...} 代码
window.addEventListener('scroll', () => {
  const el = document.getElementsByClassName('header')[0];
  const className = 'small';
  if (el.classList) {
    window.scrollY > 10 ? el.classList.add(className) : el.classList.remove(className);
  }
})

2. 修改按钮的滚动绑定：

// 替换原有的window.onscroll = function() {scrollFunction()} 代码
window.addEventListener('scroll', scrollFunction)

额外优化建议 #

• 你原有平滑滚动代码里的scroll = function(c, a, b, i) {...}没有声明变量关键字，会默认挂载为全局变量，容易造成命名冲突，建议改成const scroll = function(c, a, b, i) {...}
• 滚动事件触发频率极高，建议添加节流函数限制回调执行频率，降低性能消耗

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