Йо-йо! Ах-как часто хочется сделать кнопку прокрутки до какого-то элемента. И на самом деле это довольно просто. На самом деле у нас куча возможностей как это сделать. На том же 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); // Объект с параметрами
В объекте могут быть разные параметры:
Теперь мы знаем какие параметры в объекте может принимать метод.
И вот нам понадобилось прокрутить до определённого элемента, а именно до его середины, причем как по вертикали так и по горизонтали:
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"});
Я уже упоминал выше, что плавная анимация прокрутки работает не во всех браузерах. Полный список браузеров, которые поддерживают плавную прокрутку вы можете увидеть здесь