CSS only "scroll-to-top"
Written by Stefan Judis
- 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 13 days ago.
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 13 days ago.