Scroll to the top of the page using JavaScript?

Learn scroll to the top of the page using javascript? with practical examples, diagrams, and best practices. Covers javascript, scroll development techniques with visual explanations.
Tags:
Categories:

Mastering Page Scrolls: How to Scroll to the Top with JavaScript

Hero image for Scroll to the top of the page using JavaScript?

Learn various JavaScript techniques to smoothly scroll a web page back to its top, enhancing user experience and navigation.

Scrolling to the top of a web page is a common requirement for many web applications. Whether it's after a form submission, a navigation event, or simply providing a 'back to top' button, JavaScript offers several methods to achieve this. This article explores the most effective and widely supported techniques, from basic instant scrolls to smooth, animated transitions.

The Basic Approach: window.scrollTo()

The window.scrollTo() method is the most fundamental way to scroll to a specific position on the page. It takes two arguments: the X (horizontal) and Y (vertical) coordinates to scroll to. To scroll to the very top, you set both coordinates to 0.

window.scrollTo(0, 0);

Instantly scroll to the top-left corner of the document.

While effective, window.scrollTo(0, 0) provides an instant jump, which can sometimes feel abrupt to the user. For a smoother experience, modern browsers offer options for animated scrolling.

Smooth Scrolling with window.scrollTo() and Options Object

Modern browsers support an options object as the second argument to window.scrollTo() (or window.scroll() and window.scrollBy()). This object allows you to specify behavior, including smooth scrolling. This is the recommended approach for a better user experience.

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth'
});

Smoothly scroll to the top of the page.

Alternative: document.documentElement.scrollTop

Another way to manipulate the scroll position, particularly useful for older browsers or when dealing with specific scrollable elements, is to directly set the scrollTop property of the document.documentElement (which represents the <html> element) or document.body. However, document.documentElement.scrollTop is generally preferred for cross-browser consistency when scrolling the entire document.

document.documentElement.scrollTop = 0; // For modern browsers
document.body.scrollTop = 0;           // For older IE/Safari

Setting scrollTop property to instantly jump to the top.

Understanding the Scroll Process

The following diagram illustrates the basic flow of a 'scroll to top' action, from user interaction to the browser's rendering of the new scroll position.

flowchart TD
    A[User Clicks 'Scroll to Top' Button] --> B{JavaScript Function Called}
    B --> C{Determine Scroll Method}
    C -->|`window.scrollTo({ behavior: 'smooth' })`| D[Browser Animates Scroll]
    C -->|`window.scrollTo(0, 0)` or `scrollTop = 0`| E[Browser Instantly Jumps]
    D --> F[Page Reaches Top]
    E --> F
    F --> G[User Sees Top of Page]

Flowchart of a 'Scroll to Top' operation.

Implementing a 'Back to Top' Button

A common use case for scrolling to the top is a 'back to top' button that appears after the user has scrolled down a certain distance. Here's how you might implement such a button.

<!-- HTML for the button -->
<button id="backToTopBtn" title="Go to top">Top</button>

Basic HTML for a 'Back to Top' button.

/* Basic CSS for the button */
#backToTopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #555; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

CSS styling for the 'Back to Top' button.

// JavaScript to show/hide the button and handle click
const backToTopBtn = document.getElementById("backToTopBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() { scrollFunction() };

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    backToTopBtn.style.display = "block";
  } else {
    backToTopBtn.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
backToTopBtn.addEventListener('click', function() {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
});

JavaScript to control the 'Back to Top' button's visibility and scroll behavior.