David cleverly uses CSS alone (and only a few lines) to show a “back to top” link only after the user has started scrolling, then pin its position to the bottom-left of the screen.
margin-top: 110vh combined with
position: sticky – since
110vh is slightly more than 100% of the page’s height – gives the link a starting position that is not initially visible but becomes visible once the user starts scrolling. The
bottom: 0 then ensures that when the user continues scrolling vertically the link “sticks” to the bottom-left of the page.
So little code and so clever!
PS if you’re wondering why you’d want a “back to top” link in the first place, it’s to let a user who has scrolled far down a long page to easily get back to options located at the top. See NN Group’s Back-to-Top Button Design Guidelines.