Компонент Плавная прокрутка Scroll

Режим плавной прокрутки. Плавная прокрутка на страницах сайта при переходе к различным разделам.

Руководство

Scroll

Добавьте атрибут uk-scroll к любой внутренней ссылке на странице, которая содержит URL fragment (якорь - обычно расположен в конце URL-адреса и начинается с хеш-символа (#), также называемый "решёткой", за которой следует идентификатор), чтобы добавить режим плавной прокрутки. 

<a href="#my-id" uk-scroll></a>

Offset

Чтобы определить верхнее пиксельное смещение при переходе к определенному разделу на странице, добавьте опцию offset. 

<a href="#my-id" uk-scroll="offset: 120"></a>

Обратный вызов

Callback :: Обратный вызов после прокрутки

Чтобы получить «обратный вызов» после завершения прокрутки, вы можете прослушать событие scrolled в элементе ссылки, который вызвал прокрутку.

<a id="js-scroll-trigger" href="#my-id" uk-scroll></a>

UIkit.util.on('#scroll-trigger', 'scrolled', function () {
    alert('Готово!');
});
  • Вниз + Сallback 
  • <a id="js-scroll-trigger" class="uk-button uk-button-primary" href="#target" uk-scroll>Вниз + Сallback</a>

<script>
    UIkit.util.on("#js-scroll-trigger", "scrolled", function () {
        alert("Готово!");
    });
</script>

Параметры для атрибута

При использовании компонента Scroll к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опции компонента

Опция Значение По умолчанию Описание
offset Number 0 Смещение в пикселях добавляемое в верхнюю часть прокрутки.

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

UIkit.scroll(element, options);

События

Следующие события будут инициированы для элементов компонента «Scroll»:

Название Описание
beforescroll Срабатывает до начала прокрутки.
Can prevent scrolling by calling preventDefault() on the event.
scrolled Срабатывает после завершения прокрутки.

Методы

Для компонента «Scroll» доступны следующие методы:

ScrollTo

UIkit.scroll(element).scrollTo(el);

Прокрутка до указанного элемента.

Название Тип по умолчанию Описание
el Node, Selector undefined Элемент для прокрутки.
Прокрутить вверх