Chrome 109中JavaScript返回顶部函数失效问题求助

Chrome 109版本并不存在window.scroll({behavior:'smooth'})废弃的情况，这个API在该版本中是完全支持的。你的代码失效大概率是其他细节问题导致，以下是具体排查和修复方案：

问题1：JS代码执行时机过早 #

如果你的JS代码放在页面<head>标签内或页面顶部，会在DOM元素加载完成前执行，导致document.getElementById('back-to-up')无法找到目标按钮，事件绑定失败。

修复方法：
将JS代码放到</body>标签之前，或者用DOM加载完成事件包裹：

document.addEventListener('DOMContentLoaded', function() {
  window.onscroll = () => {
    toggleTopButton();
  }

  document.getElementById('back-to-up').addEventListener('click',function(){
    window.scroll({top:0, left:0, behavior:'smooth'});
  });

  function toggleTopButton() {
    if (window.pageYOffset > 20) {
      document.getElementById('back-to-up').classList.remove('d-none');
    } else {
      document.getElementById('back-to-up').classList.add('d-none');
    }
  }

  // 初始调用一次，确保按钮状态正确
  toggleTopButton();
});

问题2：滚动高度判断逻辑兼容性差 #

原代码中document.body.scrollTop和document.documentElement.scrollTop的取值在不同页面环境（比如有无DOCTYPE声明）下可能不一致，导致判断失效。

优化判断逻辑：
改用兼容性更好的window.pageYOffset获取滚动高度：

function toggleTopButton() {
  if (window.pageYOffset > 20) {
    document.getElementById('back-to-up').classList.remove('d-none');
  } else {
    document.getElementById('back-to-up').classList.add('d-none');
  }
}

问题3：按钮初始状态未设置 #

原按钮标签没有添加d-none类，会导致页面加载时按钮默认显示，不符合“滚动后才出现”的需求。

修复初始状态：
给按钮标签加上d-none类：

<button class="scroll-top d-none" id="back-to-up">
  <i class="fa fa-arrow-up" aria-hidden="true"></i>
</button>

额外排查步骤 #

1. 按F12打开Chrome开发者工具，切换到Console标签，查看是否有元素找不到之类的报错信息。
2. 在Console里手动执行window.scroll({top:0, left:0, behavior:'smooth'})，测试平滑滚动功能是否正常。
3. 在Elements标签中查看按钮的计算样式，确认d-none类的display:none是否被其他样式覆盖。

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