<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque excepturi tempora adipisci vero ullam. Assumenda, in veritatis nam architecto officiis reprehenderit vitae nulla autem, illum corrupti molestias quia cum omnis.</p>
<p>Voluptas ducimus quisquam perferendis molestiae accusamus, ea libero assumenda blanditiis architecto! Voluptate voluptatum, officia vel omnis similique rerum voluptas natus, veniam obcaecati minus, ullam quo quam ipsa ab animi inventore.</p>
<p>Quisquam illum quasi officia ipsa beatae impedit ipsam voluptas saepe magni accusantium odit mollitia earum voluptates dolorum fugiat, optio quia repudiandae aliquam libero. Nostrum illo dolores ullam iusto minus? Temporibus?</p>
<p>Eaque recusandae dignissimos amet commodi, beatae quia iusto dolorum necessitatibus, reiciendis delectus perspiciatis pariatur excepturi vel, soluta cumque. Quas perspiciatis facilis quis eos beatae molestias maxime tempora eius blanditiis quibusdam.</p>
<p>Ea exercitationem quod, quisquam laudantium animi magni cum alias voluptas fugiat eum, accusantium nulla quo, dicta recusandae dolor dolorem excepturi consequuntur eius ex commodi! Blanditiis vitae veritatis ex quam aspernatur.</p>
<p>Inventore itaque, vel voluptatum hic incidunt, amet aliquid, harum rerum velit sequi enim? Quisquam sapiente repudiandae perspiciatis accusamus repellat asperiores illum autem incidunt. Cumque id possimus est facere. Eos, ex.</p>
<p>Obcaecati suscipit deserunt quae ea. Maiores excepturi doloremque nostrum inventore necessitatibus quo, sit rerum nobis explicabo nesciunt rem assumenda, repellat non, commodi dolores. Ipsum placeat, voluptatum asperiores possimus iure facere?</p>
<p>Voluptatibus, recusandae eaque ratione, aliquid esse perspiciatis, commodi sequi cupiditate qui sunt accusantium suscipit maxime vel! Dicta voluptatibus enim dolores magnam, ad libero nesciunt esse iste vitae earum possimus nostrum.</p>
<p>Tenetur iusto beatae ut molestiae incidunt reiciendis similique quis voluptas veritatis at laboriosam doloribus nam aperiam voluptatibus illo, eius delectus exercitationem harum facere quam cum nihil? Iusto provident eum natus!</p>
<p>Repellendus rem, adipisci quo harum reiciendis, voluptatum deleniti laudantium, quae nobis voluptatem fuga natus numquam nemo quod maiores cum consectetur perspiciatis? Dolorum culpa architecto vero placeat dolores iste, hic omnis.</p>
<p>Accusamus dicta consequatur nam ratione dignissimos quis obcaecati ex eos, assumenda delectus recusandae deserunt sapiente! Ullam exercitationem odio ut repudiandae, similique hic quae, placeat distinctio omnis eligendi veritatis maxime a?</p>
<p>Quae facilis consectetur tenetur obcaecati temporibus quaerat repudiandae et reiciendis recusandae explicabo aut odio ipsum, illo deleniti beatae, suscipit, ullam facere totam numquam! Possimus similique ipsum quibusdam, temporibus officiis officia?</p>
<p>Facilis beatae iure excepturi laboriosam autem doloremque omnis expedita sed porro incidunt ratione inventore placeat, ab molestiae alias distinctio suscipit aut deserunt officia quam corrupti optio cupiditate repellendus. Architecto, expedita.</p>
<p>Earum perferendis reiciendis sequi ex commodi culpa sunt vero, omnis dicta. Qui similique beatae numquam, vero expedita pariatur sapiente tempora voluptas fugit? Tenetur officiis voluptatibus repudiandae, vitae ratione fuga placeat.</p>
<p>Hic quibusdam voluptatem corrupti rem rerum minima quis, exercitationem cum fuga nam perferendis omnis mollitia praesentium nisi delectus eius consequuntur quasi odit velit nulla! Aliquam sint blanditiis eos aspernatur asperiores.</p>
<p>At sapiente sint mollitia velit, doloribus excepturi quis hic placeat ipsa consectetur nostrum, maxime quasi temporibus delectus laudantium aut iusto repellendus alias! Corporis, magni dolorum error in provident praesentium quidem?</p>
<p>Possimus aliquam quis quidem voluptatum quos unde eius ex fugit, ad vel dolor minima animi repellendus delectus qui iure inventore. Iusto totam quaerat sed labore eveniet, odio quo blanditiis consequatur.</p>
<p>Ad error, a ipsum accusamus quos animi facilis incidunt totam ex delectus aspernatur voluptas, pariatur deserunt est quaerat minima possimus quas in assumenda laudantium omnis esse illo. Ducimus, quae sint.</p>
<p>Iusto, alias accusamus. Doloremque aliquam enim eaque nulla molestiae magnam! Modi laboriosam itaque ipsam eum impedit consectetur odio totam est. Ut porro fugiat iste. Voluptatibus delectus consequatur corporis accusantium ipsam.</p>
<p>In odit eaque architecto corrupti quisquam ducimus saepe voluptate repellat recusandae provident natus quo id totam, obcaecati fugit ad, molestiae beatae, blanditiis voluptas magni facilis. Magni dolorem est eveniet aspernatur?</p>

<div class="bar">
  <a href="#">Scroll to Top with CSS</a>
  —
  <a href="#" id="js-scroll-to-top">Scroll to Top with JS</a>
</div>

html {
  scroll-behavior: smooth;
}

body {
  max-width: 400px;
  font: 24px/2 -apple-system, system-ui;
  margin: 0 auto;
}

.bar {
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: center;
  background: lightyellow;
  width: 100%;
  padding: 0.5rem 0.2rem;
}

document.querySelector("#js-scroll-to-top").addEventListener("click", (e) => {
  e.preventDefault();
  window.scroll({
    top: 0,
    left: 0,
    behavior: "smooth"
  });
});