<header><a href="https://www.michaelburrows.xyz/scroll-to-top-button-javascript/">Tutorial -> www.michaelburrows.xyz/scroll-to-top-button-javascript/</a></header>
<section class="one"></section>
<section class="two"></section>
<section class="three"></section>
<section class="one"></section>
<section class="two"></section>
<section class="three"></section>

html,
body {
  padding: 0;
  margin: 0;
}
header {
  background-color: #073b4c;
  height: 8vh;
  text-align: center;
  padding-top: 40px;
}
header a {
  color: #fff;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 14px;
}
section {
  height: 90vh;
}
section.one {
  background-color: #118ab2;
}
section.two {
  background-color: #06d6a0;
}
section.three {
  background-color: #ffd166;
}
#scroll-btn {
  opacity: 0;
  width: 40px;
  height: 40px;
  color: #fff;
  background-color: #ef476f;
  position: fixed;
  bottom: 10%;
  right: 10%;
  border: 2px solid #fff;
  border-radius: 50%;
  font: bold 20px monospace;
  transition: opacity 0.5s, transform 0.5s;
}
#scroll-btn.show {
  opacity: 1;
  transition: opacity 1s, transform 1s;
}

const scrollTop = function () {
  // create HTML button element
  const scrollBtn = document.createElement("button");
  scrollBtn.innerHTML = "↑";
  scrollBtn.setAttribute("id", "scroll-btn");
  document.body.appendChild(scrollBtn);
  // hide/show button based on scroll distance
  const scrollBtnDisplay = function () {
    window.scrollY > window.innerHeight
      ? scrollBtn.classList.add("show")
      : scrollBtn.classList.remove("show");
  };
  window.addEventListener("scroll", scrollBtnDisplay);
  // scroll to top when button clicked
  const scrollWindow = function () {
    if (window.scrollY != 0) {
      setTimeout(function () {
        window.scrollTo(0, window.scrollY - 50);
        scrollWindow();
      }, 10);
    }
  };
  scrollBtn.addEventListener("click", scrollWindow);
};
scrollTop();