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