2020home

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?

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.