The JavaScript scrollIntoView() method

Q: How do I scroll to an element in JavaScript?

Call element.scrollIntoView(). Add { behavior: "smooth" } for an animated scroll.

Q: How do I make scrollIntoView() smooth?

Pass options: el.scrollIntoView({ behavior: "smooth" }).

Q: How do I center the element when scrolling?

Use { block: "center" } in the options object.

Method JavaScript All modern browsers Updated June 23, 2026

Quick answer

The scrollIntoView() method scrolls the page (or a scrollable container) so an element becomes visible. el.scrollIntoView() jumps to it; el.scrollIntoView({ behavior: "smooth" }) animates the scroll. Options also control alignment — block: "start", "center" or "nearest".

Overview

scrollIntoView() brings an element into the visible area by scrolling to it. Called with no arguments, el.scrollIntoView() jumps the element to the top of the viewport instantly. It's the JavaScript way to do "scroll to this section" — jumping to a search result, a newly added item, an error in a form, or a target after client-side navigation.

An options object gives you control. behavior: "smooth" animates the scroll instead of jumping, which feels much nicer for in-page navigation. block sets the vertical alignment — "start" (top), "center", "end" or "nearest" (scroll the least needed) — and inline does the same horizontally. So el.scrollIntoView({ behavior: "smooth", block: "center" }) smoothly centers the element.

A couple of notes. It scrolls the nearest scrollable ancestor, so it works inside scrollable containers, not just the whole page. Smooth scrolling respects the user's "reduce motion" preference in modern browsers, which is good for accessibility. And much of what people use it for — anchor-style jumps — can be done in pure CSS with scroll-behavior: smooth plus href="#id" links; use the method when you need to trigger scrolling from script.

Syntax

element.scrollIntoView()
element.scrollIntoView(alignToTop)   // boolean shorthand
element.scrollIntoView(options)

el.scrollIntoView({ behavior: "smooth", block: "center" });

Parameters

The scrollIntoView() method accepts the following parameters.

Parameter	Description
`options`	Optional. A boolean (align to top), or an object with `behavior` (`"auto"`/`"smooth"`), `block` and `inline` alignment.

Example

Live example

<div style="height:90px;overflow:auto;border:1px solid #ccc;font:15px system-ui">
  <p>Top of the box. Click the button below.</p>
  <div style="height:120px"></div>
  <p id="target" style="color:#1c7ce9;font-weight:700">>> Target paragraph <<</p>
  <div style="height:120px"></div>
</div>
<button onclick="document.getElementById('target').scrollIntoView({behavior:'smooth',block:'center'})" style="font:14px system-ui;margin-top:8px">Scroll to target</button>

Best practices

Add behavior: "smooth" for a pleasant animated scroll instead of a jump.
Use block: "center" or "nearest" to control where the element lands.
It scrolls the nearest scrollable ancestor — useful inside scrollable panels, not just the page.
For simple anchor jumps, consider CSS scroll-behavior: smooth with #id links instead.

Frequently asked questions

How do I scroll to an element in JavaScript?

Call element.scrollIntoView(). Add { behavior: "smooth" } for an animated scroll.

How do I make scrollIntoView() smooth?

Pass options: el.scrollIntoView({ behavior: "smooth" }).

How do I center the element when scrolling?

Use { block: "center" } in the options object.

Does scrollIntoView() work inside a scrollable div?

Yes — it scrolls the nearest scrollable ancestor, so it works in containers as well as the whole page.

requestAnimationFrame() scrollTo()

References