How to scroll to the top of the page using JavaScript?

To scroll to the top of the page using JavaScript, you can use one of the following methods:

1. window.scrollTo() (Standard Method)

// Instant scroll to top
window.scrollTo(0, 0);

// Smooth scroll (modern browsers)
window.scrollTo({
  top: 0,
  behavior: "smooth"
});

2. document.documentElement.scrollTop (Direct Property Update)

// For modern browsers
document.documentElement.scrollTop = 0;

// Legacy browser support
document.body.scrollTop = 0; // Fallback for older browsers

3. window.scroll() (Alias for scrollTo)

window.scroll(0, 0); // Instant
window.scroll({ top: 0, behavior: "smooth" }); // Smooth

4. scrollIntoView() (Scroll a Specific Element to Top)

// Scroll the entire page to the top via the document body
document.body.scrollIntoView({ behavior: "smooth", block: "start" });

Example: Add a “Scroll to Top” Button

HTML:

<button id="topBtn" title="Go to top">↑</button>

CSS:

#topBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  padding: 10px;
  cursor: pointer;
}

JavaScript:

const topBtn = document.getElementById("topBtn");

// Show/hide button based on scroll position
window.onscroll = () => {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    topBtn.style.display = "block";
  } else {
    topBtn.style.display = "none";
  }
};

// Smooth scroll when button is clicked
topBtn.addEventListener("click", () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
});

Key Notes

• Smooth Scrolling: Requires behavior: "smooth" (not supported in IE/older browsers).
• Cross-Browser Compatibility: Use both document.documentElement.scrollTop and document.body.scrollTop for legacy support.
• Performance: window.scrollTo() is the most reliable and widely supported method.

Browser Support

Method	Browser Support
scrollTo()	All modern browsers
behavior: "smooth"	Chrome 61+, Firefox 36+
scrollIntoView()	Chrome 45+, Firefox 55+