Parashar developer


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" 
   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" 
   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.

Look Ma! No Media Queries

Lighthouse Audit Report


Back to Top