Remember the “Back to top” links sprinkled between the content of a page back in the day? Yeah, those… Here’s a quick way to create a modern alternative, a floating dynamic “Go-to-Top” button. The button appears only after the user has scrolled down the page and it disappears once the user scrolls back up. I find a go-to-top button useful especially on mobile devices, where content is compressed in a smaller screen, making it taller and more tedious for the user to scroll back up to the top.

We only need some basic HTML, CSS and a bit of JavaScript to get a nice dynamic go-to-top button working. Check it out:

See the Pen Go-to-Top Button by Mario Rodriguez (@mariordev) on CodePen.

NOTE: This CodePen is loading jQuery for me, so just remember to load jQuery before the js code shown here.

Cheers!