如何制作一个仅当我在页面上向下滚动一点时才出现的返回顶部按钮？

Question

我知道如何制作返回顶部按钮，但如何才能使其在稍微向下滚动时才出现。有谁知道如何实现这一点？另外，如果可能的话，我不希望它淡入而不是突然出现。谢谢！u200du200d

u200d u200d u200d u200d u200d u200d u200d u200d u200d u200d u200d u200d u200d u200d u200d u200d u200d u200d u200d u200d u200d u200d u200d u200d

Answer 1

这是您可以尝试的一种解决方案。

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  var backToTopBtn = document.getElementById("backToTopBtn");
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    backToTopBtn.classList.add("show");
  } else {
    backToTopBtn.classList.remove("show");
  }
}

function scrollToTop() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

#backToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#backToTopBtn.show {
  display: block;
  opacity: 1;
}

<button id="backToTopBtn" onclick="scrollToTop()">Back to Top</button>