Как пролистать страницу до нужного элемента. ScrollIntoView. Чистый JS

Йо-йо! Ах-как часто хочется сделать кнопку прокрутки до какого-то элемента. И на самом деле это довольно просто. И на самом деле у нас куча возможностей как это сделать. На том же learn.javascript об это целая статья. Но сегодня я хочу вам рассказать об одной очень полезной функции Element.ScrollIntoView().

Данный метод поддерживается всеми современными браузерами: IE, Firefox, Safari, Opera и Сhrome. Исколючением является Opera Mini (но кому она нужна). Еще важная делать — не все браузера могут использовать плавную прокрутку до элементов. Запомните это.

Как пользоваться

Допустим у нас есть элемент с id «el». Тогда наш код будет примерно таким:

const el = document.getElementById('el');
el.scrollIntoView();

В вышеуказанном примере страница прокрутиться до верхней границы элемента. Если нам нужно, чтобы прокрутилось до нижней то нам нужно передать false в метод.

const el = document.getElementById('el');
el.scrollIntoView(); // Прокрутка до верхней границы
el.scrollIntoView(false); // Прокрутка до нижней границы

Бывают и другие нужды, например если нам нужно прокрутить страницу так, чтобы блок оказался в центре. И тут нужно сказать, что функция scrollIntoView() может принимать разные параметры:

element.scrollIntoView(alignToTop); // Булевые параметры true или false
element.scrollIntoView(scrollIntoViewOptions); // Объект с параметрами

В объекте могут быть разные параметры:

• block — определяет вертикальное выравнивание. Доступные значения: start, center,end и nearest (ближайший). По умолчанию center
• inline — определяет горизонтальное выравнивание. Актуально если есть карусель элементов или другой горизонтальный скроллинг. Доступные значения: start, center,end и nearest (ближайший). По умолчанию nearest
• behavior — определяет анимацию перехода. Значение одно из двух. auto и smooth(плавное). По умолчанию auto

Теперь мы знаем какие параметры в объекте может принимать метод.

Прокрутка до центра элемента

И вот нам понадобилось прокрутить до определённого элемента, а именно до его середины, причем как по вертикали так и по горизонтали:

const el = document.getElementById('el');
el.scrollIntoView({block: "center", inline: "center"}); // Задаём параметр block для вертикальной прокрутки до центра, inline до горизонтальной

Плавная прокрутка

За анимацию прокрутки отвечает параметр behavior. Для того, чтобы плавно прокрутить до центра элемета по вертикали нам нужно только задать наш парамерт, а block и так по умолчанию center.

const el = document.getElementById('el');
el.scrollIntoView({behavior: "smooth"});

Я уже упоминал выше, что плавная анимация прокрутки работает не во всех браузерах. Полный список браузеров, которые поддерживают плавную прокрутку вы можете увидеть здесь