javascript - 使用滚动位置来切换按钮的可见性，使用 vanilla JavaScript（无 JQuery）。注重表现

Question

我有一个按钮可以从页面底部向上滚动：

<div id="scroll-to-top">
   <a href="#head">
      <i></i>
   </a>
</div>

基本的 CSS：

#scroll-to-top {
  position: fixed;
  right: 0;
  bottom: 5%;
  width: 60px;
  display: none;
}

#scroll-to-top.visible {
  display: block;
}

我正在寻找一种最佳实践方法来切换#scroll-to-top 按钮的可见性。这应该在没有任何 JS-libraries/frameworks 的情况下工作，只需要 vanilla JavaScript，并且具有最佳性能。

谢谢。

标签： javascriptscrolltogglevisibility

Answer 1

简单易行

<script>
  const showButton = () => document.querySelector("#scroll-to-top").classList.add("visible");
  const hideButton = () => document.querySelector("#scroll-to-top").classList.remove("visible");
  document.addEventListener("scroll", (e) => window.scrollY < 100 ? hideButton() : showButton());
</script>