Skip to main content

Revealing back to top link, by David Darnes

Visit external resource

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.

The clever 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.

External Link Bookmark Note Entry Search