Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Метод 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"  | "instant" | "smooth",
    block:    "start" | "end",
}
Где:
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);

Результат

 

Примечания

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

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

Спецификация Статус Комментарии
CSS Object Model (CSSOM) View Module
Определение 'Element.scrollIntoView()' в этой спецификации.
Рабочий черновик Initial Definition


 

 

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержка
Экспериментальная
Chrome Полная поддержка 29Edge Полная поддержка 17
Замечания
Полная поддержка 17
Замечания
Замечания No support for smooth behavior.
Firefox Полная поддержка 1IE Полная поддержка 8
Замечания
Полная поддержка 8
Замечания
Замечания No support for smooth behavior or center options.
Opera Полная поддержка 38Safari Полная поддержка 6
Замечания
Полная поддержка 6
Замечания
Замечания No support for smooth behavior or center options.
WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile ? Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 5
Замечания
Полная поддержка 5
Замечания
Замечания No support for smooth behavior or center options.
Samsung Internet Android ?
scrollIntoViewOptions
Экспериментальная
Chrome Полная поддержка 61
Замечания
Полная поддержка 61
Замечания
Замечания The block and inline options support the values start, center, end, nearest.
Edge ? Firefox Полная поддержка 36
Замечания
Полная поддержка 36
Замечания
Замечания No support for inline option.
Замечания Before Firefox 58, nearest and center values for the block option was unsupported. See bug 1389274.
IE Нет поддержки НетOpera Полная поддержка 48
Замечания
Полная поддержка 48
Замечания
Замечания The block and inline options support the values start, center, end, nearest.
Safari Нет поддержки НетWebView Android Полная поддержка 61
Замечания
Полная поддержка 61
Замечания
Замечания The block and inline options support the values start, center, end, nearest.
Chrome Android Полная поддержка 61
Замечания
Полная поддержка 61
Замечания
Замечания The block and inline options support the values start, center, end, nearest.
Edge Mobile ? Firefox Android Полная поддержка 36
Замечания
Полная поддержка 36
Замечания
Замечания No support for inline option.
Замечания Before Firefox 58, nearest and center values for the block option was unsupported. See bug 1389274.
Opera Android Полная поддержка 48
Замечания
Полная поддержка 48
Замечания
Замечания The block and inline options support the values start, center, end, nearest.
Safari iOS Нет поддержки НетSamsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.

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

Метки документа и участники

Внесли вклад в эту страницу: Forshortmrmeth, gentoonofb
Обновлялась последний раз: Forshortmrmeth,