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

Scroll: Руководство

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

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

• Результат
• Разметка

Прокрутить вниз

<a class="uk-button uk-button-primary" href="#target" 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 к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

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

JavaScript

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

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

UIkit.scroll(element, options);

События

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

Методы

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

ScrollTo

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

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

Прокрутить вверх