References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript scrollTo() method

Method JavaScript All modern browsers Updated
Quick answer

The scrollTo() method scrolls the window (or a scrollable element) to an exact position. window.scrollTo(0, 0) jumps to the top; window.scrollTo({ top: 0, behavior: "smooth" }) animates it. Use coordinates when you know the target position; use scrollIntoView() to scroll to a specific element.

Overview

scrollTo() scrolls to a specific position. On window it scrolls the page; on a scrollable element it scrolls that element. You can pass coordinates — scrollTo(x, y) — or an options object, scrollTo({ top, left, behavior }), which also lets you request smooth animated scrolling. The classic use is a "scroll to top" button: window.scrollTo({ top: 0, behavior: "smooth" }).

It's an absolute scroll — it goes to the given position regardless of where you are now. Its relative sibling is scrollBy(), which scrolls by an offset from the current position (scrollBy(0, 100) moves down 100px). And to scroll a particular element into view without computing its coordinates, scrollIntoView() is usually more convenient.

The current scroll position is available from window.scrollY and window.scrollX (or element.scrollTop/scrollLeft for elements), which you can read before scrolling or to decide whether to show a back-to-top button. As with scrollIntoView(), smooth scrolling can also be set globally in CSS with scroll-behavior: smooth.

Syntax

window.scrollTo(x, y)
window.scrollTo({ top, left, behavior })

window.scrollTo(0, 0);                              // jump to top
window.scrollTo({ top: 0, behavior: "smooth" });   // smooth
element.scrollTo({ top: 200 });                    // scroll an element
window.scrollBy(0, 100);                            // relative scroll

Parameters

The scrollTo() method accepts the following parameters.

Parameter Description
x / options Either an x and y coordinate, or an options object with top, left and behavior ("auto"/"smooth").

Example

Live example 
<div id="box" style="height:90px;overflow:auto;border:1px solid #ccc;font:15px system-ui">
  <div style="height:300px;padding:8px">Long content... scroll me with the buttons.</div>
</div>
<button onclick="document.getElementById('box').scrollTo({top:200,behavior:'smooth'})" style="font:14px system-ui;margin-top:8px">Scroll down</button>
<button onclick="document.getElementById('box').scrollTo({top:0,behavior:'smooth'})" style="font:14px system-ui;margin-top:8px">Back to top</button>

Best practices

  • Use scrollTo({ top: 0, behavior: "smooth" }) for a smooth scroll-to-top.
  • Use scrollBy() for relative scrolling and scrollTo() for absolute positions.
  • To scroll to an element, scrollIntoView() is usually simpler.
  • Read the current position from window.scrollY / element.scrollTop.

Frequently asked questions

How do I scroll to the top of the page?
Use window.scrollTo({ top: 0, behavior: "smooth" }), or window.scrollTo(0, 0) to jump instantly.
What is the difference between scrollTo() and scrollBy()?
scrollTo() scrolls to an absolute position; scrollBy() scrolls by a relative offset from where you are now.
What is the difference between scrollTo() and scrollIntoView()?
scrollTo() takes coordinates; scrollIntoView() scrolls a specific element into view without needing its position.
How do I make scrollTo() smooth?
Use the options form with behavior: "smooth".
scrollIntoView() setAttribute()