Element.
Scrolls the page and any scrollable containers so the element appears on screen, either instantly or smoothly.
- Returns
undefined
Example
#const messages = document.querySelector('#messages')
function addMessage(text) {
const item = document.createElement('li')
item.textContent = text
messages.append(item)
item.scrollIntoView({ behavior: 'smooth', block: 'end' })
console.log('New message:', text)
}
addMessage('Jack: I finished module 3!')New message: Jack: I finished module 3!
The message list scrolls smoothly, and the new entry appears at the bottom edge. This example doesn’t run in the preview, because scrollIntoView() would scroll not just the example’s frame, but the whole documentation page.
Definition and usage
#The scrollIntoView() method scrolls every scrollable area the element sits in, so it becomes visible. It’s handy for a table of contents, jumping to the first error in a form, showing a new chat message, or a selected item in a long list.
Without arguments, the element lands at the top edge of the viewport. An options object lets you change that: block sets the vertical position ("start", "center", "end", or "nearest"), inline the horizontal one, and behavior: "smooth" turns on smooth scrolling instead of an instant jump. The value "nearest" only scrolls when the element is off-screen, and only by as much as needed.
Every container along the way gets scrolled, including the whole window, and in some browsers even the page that embeds the document in an iframe. If the element sits inside a list with overflow: auto, the list scrolls first, then the page. A fixed header (position: fixed or sticky) can cover the element after scrolling. The fix is the scroll-margin-top CSS property set on the target element.
Syntax
#element.scrollIntoView()
element.scrollIntoView(alignToTop)
element.scrollIntoView(options)Parameters
#alignToTop
optional, boolean
true(the default) aligns the element to the top edge, andfalseto the bottom. This is the older syntax; today the options object is more common.options
optional object
behavior("auto"or"smooth"), plusblockandinline("start","center","end","nearest"). Defaults toblock: "start"andinline: "nearest".
More examples
#const lessons = document.querySelector('#lessons')
for (let i = 1; i <= 12; i++) {
const item = document.createElement('li')
item.textContent = `Lesson ${i}`
if (i === 8) item.classList.add('current')
lessons.append(item)
}
function show(item) {
item.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
console.log('Scrolled to:', item.textContent)
}
document.querySelector('#go-current').addEventListener('click', () => show(lessons.querySelector('.current')))
document.querySelector('#go-last').addEventListener('click', () => show(lessons.lastElementChild))
console.log('Lessons in the list:', lessons.children.length)Click the buttons in the preview. The list scrolls smoothly to the selected lesson, and its name appears in the console. Thanks to block: "nearest", only the list moves, and only by as much as needed for the lesson to be visible.
document.querySelector('#toc').addEventListener('click', (event) => {
const link = event.target.closest('a[href^="#"]')
if (!link) return
event.preventDefault()
document.querySelector(link.hash).scrollIntoView({ behavior: 'smooth' })
history.replaceState(null, '', link.hash)
})If the page has a fixed header 64 px tall, add the CSS rule h2 { scroll-margin-top: 80px }. The scrolled section will then stop below the header instead of hiding behind it.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- When scrolling lists, choose
block: "nearest". An element that’s already visible stays in place, and the page won’t jump unnecessarily. - If a fixed header covers the element after scrolling, set
scroll-margin-topon the target element to the header’s height. - Respect accessibility settings: when the user has reduced motion turned on (
prefers-reduced-motion), usebehavior: "auto"instead of"smooth".
Related entries
#- Element.getBoundingClientRect()Returns an element’s size and its position relative to the viewport, as a DOMRect object.
- HTMLElement.focus()Sets focus on an element, such as a form field, so it immediately receives keyboard input. The blur() method removes focus.
- IntersectionObserverWatches whether an element is visible within the window or a scrollable container, and calls a function whenever that changes.
- matchMedia()Checks in JavaScript whether the page matches a CSS media query, e.g. (max-width: 600px), and lets you react to changes in the result.
- document.querySelector()Returns the first element that matches a CSS selector, or null when nothing matches.
Spotted a mistake or missing an example? Write to us.