DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Mario
Mario

Posted on • Originally published at mariorodriguez.co on

Create a Dynamic Go-to-Top Button

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!

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.