Smooth scroll

Усовершенствуйте свой сайт с помощью потрясающего эффекта, который замедляет прокрутку при переходе на другую часть вашей страницы.

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

Чтобы постепенно уменьшить скорость при переходе от одного раздела вашей страницы к другому, например, с помощью прокрутки вверх, добавьте атрибут data-uk-smooth-scroll к элементу <a>, который ссылается на уникальный идентификатор (#ID) раздела, на который вы хотите настроить таргетинг.

Пример

В данном примере в качестве цели использовался заголовок Smooth scroll.

Вниз! Подняться!

Разметка

<a href="#my-id" class="uk-button" data-uk-smooth-scroll>...</a>

Offset

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

Data attribute Описание
data-uk-smooth-scroll="{offset: 70}" Добавляет смещение, которое останавливает прокрутку на 70px перед целью.
data-uk-smooth-scroll="{offset: -70}" Добавляет смещение, которое останавливает прокрутку на 70 пикселей после *ниже цели.

Пример

Эта ссылка прокручивает сайт до заголовка "Offset" со смещением 80px.

Эта ссылка прокручивает сайт до заголовка "Offset" со смещением -80px.

Разметка

<a href="#my-id" data-uk-smooth-scroll="{offset: 70}">...</a>

<a href="#my-id" data-uk-smooth-scroll="{offset: -70}">...</a>

JavaScript

Вы можете вручную запустить анимацию плавной прокрутки *smooth scroll для любого целевого элемента на вашем сайте, используя JavaScript.

Плавная прокрутка до целевого элемента

UIkit.Utils.scrollToElement(UIkit.$(element, { /* options */ }));

JavaScript options

Option Possible value Default Описание
duration integer 1000 Как долго будет работать анимация прокрутки.
offset integer 0 Добавляет указанное расстояние к целевому элементу при расчете положения прокрутки (может быть отрицательным).