JavaScript Window scrollTo() Method

What You’ll Learn

The scrollTo() method jumps the page to absolute scroll coordinates. This tutorial covers syntax, smooth scrolling, back-to-top buttons, scrolling to elements, how it differs from scrollBy(), five examples, and when to prefer scrollIntoView().

Introduction

Users expect “Back to top” links, table-of-contents jumps, and smooth navigation to page sections. The window.scrollTo() method moves the viewport to specific pixel coordinates in the document—unlike scrollBy(), which moves relative to where you already are.

scrollTo() works on normal browser tabs and is supported everywhere. Pair it with behavior: "smooth" for animated scrolling, or use CSS scroll-behavior: smooth on html for hash links without JavaScript.

Understanding the scrollTo() Method

window.scrollTo(x, y) sets the horizontal and vertical scroll position of the document. After the call, window.scrollX should equal x and window.scrollY should equal y (within document bounds). The method returns undefined.

Modern browsers accept ScrollToOptions: scrollTo({ top: 500, left: 0, behavior: "smooth" }). Use top / left in the object form and x / y in the positional form—they map to the same coordinates.

📝 Syntax

General forms of Window.scrollTo():

window.scrollTo(x, y);

// smooth scroll to coordinates (ScrollToOptions):
window.scrollTo({ top: 500, left: 0, behavior: "smooth" });

// shorthand (same in browsers):
scrollTo(0, 0);

Parameters

• x (positional form) — horizontal scroll position in pixels from the document’s left edge.
• y (positional form) — vertical scroll position in pixels from the document’s top edge.
• options (object form) — { top, left, behavior } where behavior is "auto" or "smooth".

Return value

• undefined.

Related APIs

• window.scrollBy(dx, dy) — scroll relative to current position.
• element.scrollIntoView() — scroll so an element is visible.
• window.scrollX / scrollY — read current scroll offset.
• element.offsetTop — element’s distance from offset parent (useful with scrollTo).
• element.scrollTo() — set scroll position inside a scrollable container.

Examples Gallery

Use the Try-it links on tall pages to jump to coordinates or sections. Each example sets an absolute scroll position.

window.scrollTo(0, 500);
console.log("scrollY =", window.scrollY);

scrollY = 500
(clamped if document is shorter)

document.getElementById("topBtn").addEventListener("click", function () {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth"
  });
});

Click Back to top → page animates to scrollY = 0.

const section = document.getElementById("pricing");

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

Viewport scrolls so #pricing aligns with the top of the page.

window.scrollTo({
  left: 300,
  top: window.scrollY,
  behavior: "smooth"
});

Page scrolls horizontally to scrollX = 300; vertical position unchanged.

<nav>
  <button type="button" data-target="faq">FAQ</button>
</nav>

<section id="faq" style="margin-top: 120vh">FAQ content</section>

<script>
  document.querySelector("[data-target='faq']").addEventListener("click", function () {
    const el = document.getElementById("faq");
    window.scrollTo({ top: el.offsetTop, behavior: "smooth" });
  });
</script>

Click FAQ → page smoothly scrolls to the #faq section.

🚀 Common Use Cases

• Back to top — scrollTo({ top: 0, behavior: "smooth" }).
• Table of contents — jump to section headings on long docs.
• Onboarding tours — scroll to highlighted UI regions.
• Form validation — scroll to the first invalid field.
• Single-page apps — reset scroll on route change with scrollTo(0, 0).
• Horizontal timelines — scrollTo({ left: x }) on wide content.

📝 Notes

• Fixed headers may cover content scrolled to with offsetTop—subtract header height or use scroll-margin-top in CSS.
• Checking if ("scrollTo" in window) is unnecessary in modern browsers—the method is universal.
• Respect prefers-reduced-motion: reduce—use instant scroll when users request reduced motion.
• scrollTo on window moves the document; on an element it sets that container’s scrollTop / scrollLeft.
• SPAs often call scrollTo(0, 0) on navigation so new pages start at the top.
• For hash links (#section), native behavior plus CSS may replace JavaScript entirely.

💡 Best Practices