Pankaj
Parashar

Developer. Designer. Writer.

Hello. I'm Pankaj Parashar, 30yo frontend designer, developer from Mumbai, India. I make things for the web and write about them on my blog here.

Elsewhere,
Twitter | Github | Codepen

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?

Published on May 16, 2020

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.

Previous
Lighthouse Audit Report

Next
URI Design