CSS only "scroll-to-top"

Published at: Dec 08 2023
Updated at: Apr 16 2024
Reading time: 2min

David Darnes shared a nifty tiny trick to build a "scroll to top" component that automatically shows up after you scroll down a little.

And thanks to modern CSS, position: sticky is all you need. 💙

Here's a scroll-top link in action. 👇

HTML

<div>
  <p>SCROLL DOWN. 👇 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
</div>
<span class="top">Back to top</span><div>
  <p>SCROLL DOWN. 👇 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
</div>
<span class="top">Back to top</span>

CSS

html, body {
  --container-height: 100vh;
  height: var(--container-height);
}

.top {
  --distance-to-scroll: 50px;
  margin-top: calc(
    var(--container-height) +
    var(--distance-to-scroll)
  );
  position: sticky;
  bottom: 0;
  left: 5px;
}
html, body {
  --container-height: 100vh;
  height: var(--container-height);
}

.top {
  --distance-to-scroll: 50px;
  margin-top: calc(
    var(--container-height) +
    var(--distance-to-scroll)
  );
  position: sticky;
  bottom: 0;
  left: 5px;
}

Preview

But why use 100vh instead of 100%?

Fun fact: percentages in margin-top refer to the logical width of the containing block. margin-top: 50% isn't half the container's height, but width.

Either way, this is a nifty little CSS trick. Thanks, David!

If you enjoyed this article...

Join 6.3k readers and learn something new every week with Web Weekly.

Reply to this post and share your thoughts via good old email.

Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

CSS only "scroll-to-top"

About Stefan Judis

Related Topics

Related Articles