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
window.scrollTo(0, 400);Helper test:
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
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
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.
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
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.
