30-seconds-of-code/snippets/smoothScroll.md

title, tags

title	tags
smoothScroll	browser,css,intermediate

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

Use .scrollIntoView method to scroll the element. Pass { behavior: 'smooth' } to .scrollIntoView so it scrolls 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