用js写出回到顶部按钮

可以通过以下代码实现一个简单的回到顶部按钮：

HTML:

<button id="back-to-top-btn">回到顶部</button>

CSS:

#back-to-top-btn {
  display: none; /* 初始状态下不显示 */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  font-size: 16px;
  border: none;
  outline: none;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 5px;
}

#back-to-top-btn:hover {
  background-color: #333;
}

JavaScript:

window.addEventListener("scroll", function () {
  var backToTopBtn = document.getElementById("back-to-top-btn");
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    backToTopBtn.style.display = "block";
  } else {
    backToTopBtn.style.display = "none";
  }
});

document.getElementById("back-to-top-btn").addEventListener("click", function () {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
});

上述代码中，我们通过添加滚动监听器来检测页面是否已经滚动到一定的高度，当页面滚动高度超过20像素时，就显示回到顶部按钮；否则，隐藏按钮。当用户点击按钮时，我们将页面滚动高度设置为0，即返回页面顶部。