<main>
  <h1>SCROLL 👇</h1>
</main>
<footer>
  <button id="scrollToTopBtn">☝️</button>
</footer>
* {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(
    #d16ba5,
    #e17497,
    #eb828b,
    #ee9183,
    #eda280,
    #f1ad7d,
    #f3b97b,
    #f3c67b,
    #f8d273,
    #fbdf6b,
    #f9ec64,
    #f4fb5f
  );
}

main {
  height: 200vmin;
}

h1 {
  color: white;
  font-family: system-ui, sans-serif;
  font-size: 48px;
  text-align: center;
}

footer {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}

#scrollToTopBtn {
  background-color: black;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 18px;
  line-height: 48px;
  width: 48px;
}
var scrollToTopBtn = document.getElementById("scrollToTopBtn");
var rootElement = document.documentElement;

function scrollToTop() {
  // Scroll to top logic
  rootElement.scrollTo({
    top: 0,
    behavior: "smooth"
  });
}
scrollToTopBtn.addEventListener("click", scrollToTop);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.