0

как сделать если я нажимаю на шапке на кнопку меня проскролило до определенного контента на этой же странице

1

1 ответ 1

3

Как вариант воспользоваться 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"});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.