Pankaj
Parashar developer

twitter
email@pankajparashar.com

Back to Top reboot

The Back To Top button has been a holy grail along with the hamburger menu. Historically, jQuery was used to animate the jump from the bottom of the page to the top of the page. Is there a modern day equivalent?

May 16, 2020 // 1 min read

This is the previous implementation,

<a role="button" 
   onClick="window.scrollTo(0,0)" 
   href="javascript:void(0)">Back to Top</a>

Recently I learnedabout the Element.scrollIntoView method that scrolls the elements parent container such that the element is visible to user in the viewport. Optionally, we can also define behavior to scroll smoothly.

Hence, here is my updated version of the famous Back to Top button,

<a role="button" 
   onClick="document.body.scrollIntoView({behavior:'smooth'})" 
   href="javascript:void(0)">Back to Top</a>

CanIUse suggests that all modern browsers support the scrollIntoView API, which is cool too.

Did you enjoy reading this artice? I'd love to hear your thoughts. Feel free to send me a tweet or open an issue on Github to add your comments.

Next
Look Ma! No Media Queries

Previous
Lighthouse Audit Report

2012-2020
Light/Dark

Back to Top