.scrollIntoView()

scrollIntoView(element [, options])

Метод .scrollIntoView() для работы с плавной прокруткой к указанному элементу. Дополнительно можно указать верхнее смещение.

Использование

В данном примере имеем кнопку "К цели!", при клике на которую, с помощью функции util.scrollIntoView(), происходит плавное перемещение к целевому блоку с идентификатором #my-target, так, чтобы он был видим пользователю.

<button id="my-btn" class="uk-button uk-button-primary">К цели!</button>

<div class="uk-height-large">Что-то...</div>

<div id="my-target">Цель</div>

util.on('#my-btn', 'click', function () {
  const myTarget = util.$('#my-target')
  
  util.scrollIntoView(myTarget, { offset: 100 })
});

* JavaScript и только

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

Пример

Пример Element.scrollIntoView() с использованием простого JavaScript без каких-либо дополнительных библиотек прокручивает элемент таким образом, чтобы элемент был виден пользователю.

<button id="my-btn-siv" class="uk-button uk-button-primary">К цели siv!</button>

<div class="uk-height-medium uk-background-muted">Что-то…</div>

<div id="my-target-siv" class="uk-tile">
    Цель siv
</div>

const myBtnSiv = document.getElementById('my-btn-siv');

myBtnSiv.addEventListener('click', function () {
    document.getElementById('my-target-siv').scrollIntoView()
})

Пример: плавность перехода

behavior: "smooth"

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

<button id="my-btn-smooth" class="uk-button uk-button-primary">К цели - smooth!</button>

<div class="uk-height-medium uk-background-muted">Что-то…</div>

<div id="my-target-smooth" class="uk-tile">
    Цель - smooth
</div>

const myBtnSmooth = document.getElementById('my-btn-smooth');

myBtnSmooth.addEventListener('click', function () {
    document.getElementById('my-target-smooth').scrollIntoView(
        {behavior: "smooth", block: "start"}
    );
});