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

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

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>

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

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

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

JavaScript

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

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

UIkit.scroll(element, options);

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

События

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

Название Описание
beforescroll Срабатывает до начала прокрутки. Можно предотвратить прокрутку,
returning false.
scrolled Срабатывает после завершения прокрутки.

Методы

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

ScrollTo

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

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

Название Тип по умолчанию Описание
el Node, Selector undefined The element to scroll to.

Документация
Компоненты