30-seconds-of-code/snippets/scrollToTop.md

title, tags, expertise, cover, firstSeen, lastUpdated

title	tags	expertise	cover	firstSeen	lastUpdated
Scroll page to top	browser	intermediate	blog_images/tranquil-lake.jpg	2017-12-17T17:55:51+02:00	2020-10-22T20:24:30+03:00

Smooth-scrolls to the top of the page.

• Get distance from top using Document.documentElement or Document.body and Element.scrollTop.
• Scroll by a fraction of the distance from the top.
• Use Window.requestAnimationFrame() to animate the scrolling.

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};

scrollToTop(); // Smooth-scrolls to the top of the page