Smooth scroll

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

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

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

Пример

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

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

Offset

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

Пример

Эта ссылка прокручивает сайт до заголовка "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