Smooth scroll element into view

OSCC · JavaScript, Browser, CSS · Oct 22, 2020

Smoothly scrolls the element on which it's called into the visible area of the browser window.

  • Use Element.scrollIntoView() to scroll the element.
  • Use { behavior: 'smooth' } to scroll smoothly.
const smoothScroll = element =>
  document.querySelector(element).scrollIntoView({
    behavior: 'smooth'
  });
smoothScroll('#fooBar'); // scrolls smoothly to the element with the id fooBar
smoothScroll('.fooBar');
// scrolls smoothly to the first element with a class of fooBar

Recommended snippets