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!

Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 3 days ago.

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