Element.scrollIntoView()

Метод Element.scrollIntoView() интерфейса Element прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван scrollIntoView() был видим пользователю.

Синтаксис

element.scrollIntoView(); // эквивалентно element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // аргумент типа Boolean 
element.scrollIntoView(scrollIntoViewOptions); // аргумент типа Object 

Параметры

alignToTop Необязательный

Параметр типа Boolean, возможные значения:

•  true,  верхняя граница элемента будет выровнена вверху видимой части окна прокручиваемой области. Соответствует scrollIntoViewOptions: {block: "start", inline: "nearest"}. Значение по умолчанию.
• false, нижняя граница элемента будет выровнена внизу видимой части окна прокручиваемой области. Соответствует конфигурации scrollIntoViewOptions: {block: "end", inline: "nearest"}

scrollIntoViewOptions Необязательный

Aргумент типа boolean или типа object со следующим набором опций:

behavior Необязательный

Определяет анимацию скролла. Принимает значение "auto" или "smooth". По умолчанию "auto".

block Необязательный

Вертикальное выравнивание.
Одно из значений: "start", "center", "end" или "nearest". По умолчанию "center".

inline Необязательный

Горизонтальное выравнивание.
Одно из значений: "start", "center", "end" или "nearest". По умолчанию "nearest".

Пример

HTML

<button type="button" class="btn">Нажми на меня</button>

<div class="big"></div>

<div id="box" class="box">Скрытый элемент</div>

CSS

.big {
   background: #ccc;
   height: 300px;
}

.btn {
   font-size: 14px;
}

.box {
   background: lightgreen;
   height: 40px;
}

JavaScript

var hiddenElement = document.getElementById("box");
var btn = document.querySelector('.btn');

function handleButtonClick() {
   hiddenElement.scrollIntoView({block: "center", behavior: "smooth"});
}

btn.addEventListener('click', handleButtonClick);

Результат

Примечание

Область может не полностью прокручивается до элемента (вверх или вниз), это зависит от расположения других элементов.

Спецификации

Совместимость с браузерами

Смотрите также

• Element.scrollIntoViewIfNeeded()