Скроллинг

С помощью компонента возможна плавная прокрутка при переходе к различным разделам на странице.

Usage

Добавьте атрибут uk-scroll к любой внутренней ссылке на странице, содержащей фрагмент URL (якорь) для добавления режима плавной прокрутки.

<a href="#my-id" uk-scroll></a>
  • Скролл вниз
  • <a class="uk-button uk-button-primary" href="#target" uk-scroll>Скролл вниз</a>

Функция обратного вызова при скролле

Чтобы запустить какую-либо функцию по завершении прокрутки, вы можете слушать событие scrolled в элементе ссылки, которое вызывает прокрутку.

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

UIkit.util.on('#scroll-trigger', 'scrolled', function () {
    alert('Работает!');
});
  • Прокрутить вниз 
  • <a id="js-scroll-trigger" class="uk-button uk-button-primary" href="#target" uk-scroll>Прокрутить вниз</a>

<script>
    UIkit.util.on('#js-scroll-trigger', 'scrolled', function () {
        alert('Работает!');
    });
</script>

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

Любой из этих параметров может быть применен к атрибуту компонента. Отделяйте параметры друг от друга с помощью точки с запятой подробнее о параметрах

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

JavaScript

Подробнее читайте в разделе компоненты JavaScript.

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

UIkit.scroll(element, options);

Наверх

События

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

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

Методы

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

ScrollTo

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

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

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