Published at
Updated at
Reading time

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. ๐Ÿ‘‡


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 4 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.

Related Topics

Related Articles