JavaScript scrollTo() and Scroll to Element Examples

scrollTo() scrolls a window or scrollable element to a specific position. It is commonly used for back-to-top buttons, smooth scrolling, dashboards, long pages, and jumping to a saved scroll position.

Use window.scrollTo() when scrolling the page. Use element.scrollTo() when scrolling inside a specific container. Use scrollIntoView() when the goal is to bring a particular element into view.

Environment: Node.js v20.18.2. After each runnable snippet, the following paragraph states the expected console output (order and values).

Method 1: Scroll the Window to Coordinates

javascript

window.scrollTo(0, 400);

Helper test:

javascript


function scrollToArgs(x, y) {
  return typeof x === "object" ? `${x.top}:${x.behavior}` : `${x}:${y}`;
}

console.log("scrollto-pos:", scrollToArgs(0, 400));

You should see one line logging scrollto-pos: 0:400.

Method 2: Smooth Scroll with scrollTo Options

javascript


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

Tested helper output::

You should see one line logging scrollto-smooth: 400:smooth.

Use behavior: "smooth" when a visible animated scroll improves the user experience.

Method 3: Scroll to the Top of the Page

javascript

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

This is the common implementation for a back-to-top button.

Method 4: Scroll to an Element

For scrolling to a particular element, scrollIntoView() is usually simpler than calculating coordinates.

javascript


document.querySelector("#pricing")?.scrollIntoView({
  behavior: "smooth",
  block: "start",
});

Use this when the target element already exists in the document.

Method 5: Scroll Inside a Container

javascript


const panel = document.querySelector(".results-panel");
panel?.scrollTo({ top: 300, behavior: "smooth" });

This scrolls the container, not the whole page.

Common Questions About JavaScript scrollTo

What is window.scrollTo used for?

It scrolls the browser window to a specific x and y coordinate.

How do I smoothly scroll to an element in JavaScript?

Use element.scrollIntoView({ behavior: "smooth" }) or calculate the target position and pass it to window.scrollTo().

What is the difference between scrollTo and scrollBy?

scrollTo() scrolls to an absolute position. scrollBy() scrolls by a relative amount from the current position.

Summary

Use window.scrollTo() to scroll the page to fixed coordinates, pass an options object for smooth scrolling, and use scrollIntoView() when the target is a specific element. For scrollable panels, call scrollTo() on the element itself instead of the window.