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

title, tags, expertise, cover, firstSeen, lastUpdated

title	tags	expertise	cover	firstSeen	lastUpdated
Smooth scroll element into view	browser,css	intermediate	blog_images/carrots.jpg	2018-03-02T18:22:51+02:00	2020-10-22T20:24:30+03:00

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