js 回到顶部动画

<button id="backToTopBtn">回到顶部</button>

#backToTopBtn {
  display: none; /* 默认隐藏 */
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

#backToTopBtn:hover {
  background-color: #333;
}

// 获取按钮
let backToTopBtn = document.getElementById("backToTopBtn");

// 当用户滚动页面时，显示或隐藏按钮
window.onscroll = function() { scrollFunction(); };

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    backToTopBtn.style.display = "block";
  } else {
    backToTopBtn.style.display = "none";
  }
}

// 当用户点击按钮，滚动到顶部
backToTopBtn.addEventListener("click", function(){
  scrollToTop(600); // 600毫秒的动画时间
});

// 平滑滚动函数
function scrollToTop(scrollDuration) {
  const scrollStep = -window.scrollY / (scrollDuration / 15);
  const scrollInterval = setInterval(function(){
    if (window.scrollY !== 0) {
      window.scrollBy(0, scrollStep);
    } else {
      clearInterval(scrollInterval);
    }
  }, 15);
}