求助：我的Scroll to top按钮无法正常工作，该如何解决？

以下是针对你的代码问题的排查和修复方案：

1. 按钮初始状态未隐藏 #

你的代码仅在滚动时切换按钮的display属性，但button标签默认是inline-block显示状态，导致页面加载时按钮直接可见。需要给按钮添加初始隐藏样式：

#myBtn {
  display: none;
  /* 可选：添加固定定位让按钮悬浮在页面角落 */
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  cursor: pointer;
}

2. 滚动检测逻辑优化 #

部分浏览器对document.body.scrollTop和document.documentElement.scrollTop的兼容性表现不一，改用window.scrollY可以统一检测滚动距离：

function scrollFunction() {
  mybutton.style.display = window.scrollY > 20 ? "block" : "none";
}

3. 点击滚动功能升级 #

原生scrollTop设置是瞬间跳转，改用window.scrollTo支持平滑滚动，同时兼容更多浏览器：

function topFunction() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 不需要平滑滚动可删除此行
  });
}

4. DOM加载顺序问题 #

如果JS代码写在HTML按钮之前，会导致document.getElementById("myBtn")获取不到元素。可以用DOM加载完成事件包裹代码，确保元素存在后再执行：

document.addEventListener('DOMContentLoaded', function() {
  let mybutton = document.getElementById("myBtn");

  window.onscroll = scrollFunction;

  function scrollFunction() {
    mybutton.style.display = window.scrollY > 20 ? "block" : "none";
  }

  window.topFunction = function() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };
});

完整修复后的代码示例 #

HTML #

<div style="height:700px">Content</div>
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top <span class="arrow">&#8593;</span></button>

CSS #

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  padding: 10px 15px;
  cursor: pointer;
}

JavaScript #

document.addEventListener('DOMContentLoaded', function() {
  let mybutton = document.getElementById("myBtn");

  window.onscroll = scrollFunction;

  function scrollFunction() {
    mybutton.style.display = window.scrollY > 20 ? "block" : "none";
  }

  window.topFunction = function() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };
});

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