Published at
Updated at
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
CSS
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 21 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.