To top floating button in JS

1
2
3

<button id="scrollToTopBtn" title="Go to top">
    ↑
</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

const scrollToTopBtn = document.getElementById("scrollToTopBtn");

document.addEventListener("DOMContentLoaded", function () {
  window.onscroll = function () {
    if (
      document.body.scrollTop > 20 ||
      document.documentElement.scrollTop > 20
    ) {
      scrollToTopBtn.style.display = "block";
    } else {
      scrollToTopBtn.style.display = "none";
    }
  };
  scrollToTopBtn.onclick = function () {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

#scrollToTopBtn {
  position: fixed;
  bottom: 1em;
  right: 1em;
  display: none;
  width: 3em;
  height: 3em;
  padding: 1em;
  background-color: black;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
}