Плавная прокрутка
Улучшайте свой сайт с хорошим эффектом, замедляет прокрутку при прыжках в другой части вашей страницы.
Использование
Постепенное снижение скорости при переходе от одной части страницы к другой, например, с к-топ-скроллер, просто добавьте data-uk-smooth-scroll
атрибут к <a>
элемент, что ссылки на ID раздела, который вы хотите створ.
Пример
В нашем примере мы используем Заголовок Smooth scroll как мишень.
Идите Вверх! Иди Вниз!Разметки
<a href="#my-id" class="uk-button" data-uk-smooth-scroll>...</a>
Смещение
Смещение-параметр добавляет заданное расстояние до цели при расчете положения прокрутки. Смещение передается через Data-атрибут. Значение может быть как положительным, чтобы остановить прокрутку до цели или отрицательное остановить прокрутку после того, как цель.
Данные атрибут | Описание |
---|---|
data-uk-smooth-scroll="{offset: 90}" |
Добавляет смещение, что не остановятся перед 90px в створ. |
data-uk-smooth-scroll="{offset: -90}" |
Добавляет смещение, что не остановятся 90px в после цели. |
Пример
По этой ссылке прокрутка сайта в Заголовок "плавная прокрутка" со смещением 90px
.
По этой ссылке прокрутка сайта в Заголовок "плавная прокрутка" со смещением -90px
.
Разметки
<a href="#my-id" data-uk-smooth-scroll="{offset: 90}">...</a>
<a href="#my-id" data-uk-smooth-scroll="{offset: -90}">...</a>