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

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

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

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

<a href="#my-id" uk-scroll></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 The element to scroll to.
Документация
Компоненты