Кнопка "Наверх"
Кнопка "Наверх" - представляет собой обычную кнопку со стрелкой вверх которая появляется при прокрутке странцы вниз, и при нажатии на которую происходит плавный переход к началу страницы.
Как добавить кнопку "Наверх" на страницу
Все просто нужно разместить код представленный в Пример 1 на страницу.
Пример 1. Код кнопки "Наверх"
<a class="sf-up sf-up-default sf-up-position-rb">
<i class="fa fa-chevron-up"></i>
</a>
Параметры
Кнопка "Наверх" имеет дополнительные параметры которые могут изменять внешний вид, форму и положение. Все имеющиеся параметры кнопки "Наверх" перечисленны в Таблице 1.
Таблица 1. Все имеющиеся параметры кнопки "Наверх"
| Наименование | Модификатор | Описание | Пример |
|---|---|---|---|
| Граница | .sf-up-border |
Вид кнопки из закрашенного превращается в окрашивание цветом только границ кнопки | Пример 1 |
| Размещение справа/снизу | .sf-up-position-rb |
Кнопка размещается в правой нижней части экрана | Пример 2 |
| Размещение слева/снизу | .sf-up-position-lb |
Кнопка размещается в левой нижней части экрана | Пример 3 |
| Размещение по центру/снизу | .sf-up-position-cb |
Кнопка размещается по центру нижней части экрана | Пример 4 |
| Размещение справа/сверху | .sf-up-position-rt |
Кнопка размещается по центру нижней части экрана | Пример 5 |
| Размещение слева/сверху | .sf-up-position-lt |
Кнопка размещается слева в верхней части экрана | Пример 6 |
| Размещение по центру/сверху | .sf-up-position-ct |
Кнопка размещается по центру в верхней части экрана | Пример 7 |
| Круглая форма кнопки "Наверх" | .sf-up-round |
Кнопка преобретает круглую форму. | Пример 8 |
| Прозрачность | .sf-up-opacity |
Кнопка становиться прозрачной. | Пример 9 |
| Анимация появления 1 | .sf-up-default |
Анимация появления по-умолчанию | Пример 10 |
| Анимация появления 2 | .sf-up-appear-bottom |
Анимация появления "Снизу" | Пример 11 |
| Анимация появления 3 | .sf-up-appear-top |
Анимация появления "Сверху" | Пример 12 |
| Анимация появления 4 | .sf-up-appear-right |
Анимация появления "Справа" | Пример 13 |
| Анимация появления 5 | .sf-up-appear-left |
Анимация появления "Слева" | Пример 14 |
| Анимация значка | .sf-up-animated |
Анимация стрелки "Вверх" | Пример 15 |