<div class="container">
    <button id="scrolltotop">Top</button>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi
      temporibus eum repellat, asperiores nisi sunt fuga! Ullam placeat, animi,
      nesciunt quibusdam, consequuntur molestias neque ab ipsam blanditiis
      distinctio explicabo!
    </p>
</div>
.container {
  padding: 1rem 4rem;
  font-size: 18px;
  line-height: 2;
}

p {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 1rem;
  margin: 1rem auto;
}

#scrolltotop {
  padding: 1rem;
  border-radius: 10px;
  background-color: black;
  color: white;
  font-weight: 700;
  font-size: 20px;
  border: none;
  outline: none;
  cursor: pointer;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: none;
}
const scrollToTopBtn = document.getElementById("scrolltotop");

document.addEventListener("scroll", handleScroll);

function handleScroll() {
  if (window.scrollY > 500) {
    scrollToTopBtn.style.display = "block";
  } else {
    scrollToTopBtn.style.display = "none";
  }
}

scrollToTopBtn.addEventListener("click", scrollToTop);

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.