Плавный скролл с элементу на чистом JavaScript

• 
  Vadim Tsukanov
  Разработчик
• Дата публикации
  15.01.2021
• Категория
  JavaScript

Очень часто необходимо выполнить скролл к элементу, и многие для этого ставят отдельный jQuery плагин, однако все это делается буквально парой строчек.

Для начала установим в css

html {
  scroll-behavior: smooth;
}

Теперь можем спокойно использовать методы ниже, и при этом скролл будет плавным.

//аналог scrollTo
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});

Однако чаще необходимо скроллить до какого-либо элемента. Это легко исполняет следующий код:

document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

По сути — все 5-6 строк вместо библиотеки.