Scroll to Top of a Page with JavaScript

You will learn how browser scrolling is controlled in JavaScript and how to reliably move the current page viewport to its top position instantly. You will also see how to attach the behavior to a button and avoid common scrolling mistakes.

A web page can be taller than the visible browser area. The browser therefore maintains a scroll position: how far the viewport has moved from the page's top and left edges.

JavaScript can change that position through the window object. The clearest modern API is window.scrollTo(). It accepts coordinates:

• top: vertical distance from the top of the document
• left: horizontal distance from the left of the document
• behavior: whether movement is instant ("auto") or animated ("smooth")

To reach the top, set top to 0. This matters in real interfaces because long pages often provide a Back to top control after users have read a large amount of content.

Think of the page as a long paper map under a small window. Scrolling moves the map beneath the window.

• At top: 0, the window is looking at the map's very top edge.
• At top: 800, the window is looking 800 pixels below the top.

window.scrollTo() tells the browser exactly where to place that window. Asking for top: 0 moves the view back to the start immediately.

Use window.scrollTo() with a top coordinate of 0:

window.scrollTo({
  top: 0,
  left: 0,
  behavior: "auto"
});

behavior: "auto" uses the browser's normal, non-animated scrolling behavior. In most browsers, this means the viewport jumps immediately.

For a simple vertical page, this shorter form also works:

window.scrollTo(0, 0);

The first 0 is the horizontal position (x or left), and the second is the vertical position (y or top).

Here is an HTML button that performs the action when clicked:

<button id="backToTop" =>Back to top

Consider this code:

const button = document.querySelector("#backToTop");

button.addEventListener("click", () => {
  window.scrollTo({ top: 0, behavior: "auto" });
});

1. document.querySelector("#backToTop") finds the element whose id is backToTop.
2. The returned button element is stored in button.
3. addEventListener("click", ...) registers a function to run later, when the user clicks that button.
4. A click occurs, so the arrow function runs.
5. window.scrollTo(...) instructs the browser window to scroll.
6. top: 0 sets the vertical scroll offset to the very beginning of the document.
7. behavior: "auto" prevents JavaScript from requesting a smooth animation, so the position changes immediately under normal browser settings.

• Documentation pages: A back-to-top button helps readers navigate long API references.
• Online stores: Users can quickly return to category filters after browsing many products.
• Search results: After changing a search query or page of results, an application can place the user at the top of the new results.
• Form validation: A form can scroll to the top when a summary of validation errors is displayed there.
• Single-page applications: A client-side route change commonly resets the viewport so the next screen starts at its top.

In production code, scrolling is usually triggered by a user action or a navigation event rather than run immediately when a script loads.

Show the button only after scrolling down

const button = document.querySelector("#backToTop");

window.addEventListener("scroll", () => {
  const hasScrolledDown = window.scrollY > 400;
  button.hidden = !hasScrolledDown;
});

button.addEventListener("click", () => {
  window.scrollTo({ top: 0, behavior: "auto" });
});

window.scrollY is the current vertical scroll position. Hiding the control near the top prevents unnecessary interface clutter.

Reset after a route or view change

function showSearchResults(results) {
  renderResults(results);
  window.scrollTo({ : , :  });
}

Scrolling the wrong thing

This scrolls the browser window:

window.scrollTo({ top: 0 });

If the visible scrollbar belongs to a nested element with overflow: auto or overflow: scroll, it will not move. Scroll that element instead:

const panel = document.querySelector(".scrollable-panel");
panel.scrollTo({ top: 0 });

Accidentally requesting smooth scrolling

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

This animates the movement. Use "auto" when an immediate jump is required:

window.scrollTo({ top: 0, :  });

// Modern, explicit: immediately go to the page top
window.scrollTo({ top: 0, left: 0, behavior: "auto" });

// Short positional form
window.scrollTo(0, 0);

// Scroll a nested element to its top
const container = document.querySelector(".scrollable");
container.scrollTo({ top: 0, behavior: "auto" });

// Current vertical page offset
console.log(window.scrollY);

• Use window.scrollTo() for the document viewport.
• Use element.scrollTo() for an element with its own scrollbar.
• top: 0 means the topmost vertical position.
• behavior: "auto" requests normal, non-smooth scrolling.
• scrollTo is absolute; is relative.

How do I instantly scroll to the top in JavaScript?

Use:

window.scrollTo({ top: 0, behavior: "auto" });

Does window.scrollTo(0, 0) scroll instantly?

Yes. It sets the horizontal and vertical page offsets to zero without requesting a smooth animation.

Why does window.scrollTo() not move my visible scrollbar?

The scrollbar may belong to a nested scrollable element rather than the browser window. Select that element and call element.scrollTo({ top: 0 }).

What is the difference between scrollTo and scrollBy?

scrollTo moves to an exact coordinate. scrollBy moves by a distance relative to the current position.

Can I use CSS scroll-behavior: smooth and still make this instant?

Specify behavior: "auto" in the JavaScript call. If project styling or browser behavior produces an unexpected animation, check the page's CSS and test the intended browser environment.

Should a Back to top control be a link or a button?

• Browser DOM events — Attach scroll behavior to clicks and other user interactions.
• Event listeners — Use addEventListener() to respond to a button click.
• CSS overflow — Determines whether an element creates its own scrollable area.
• CSS scroll behavior — Controls default smooth-scrolling behavior in CSS.
• Element.scrollIntoView() — Scrolls until a particular element is visible.
• Client-side routing — Applications often restore or reset scroll positions after navigation.
• Accessibility for buttons — Semantic buttons improve keyboard and assistive-technology support.