Простая кнопка прокрутки страницы вверх, которая будет автоматически появляться при прокрутке на определенное число пикселей и соответственно пропадать, когда диапазон прокрутки станет меньше этого значения. Вы сможете задать значение скролла в пикселях, после которого кнопка отобразится, и стилизовать саму кнопку при помощи CSS. Для иконок используется шрифт Awesome, который в uCoz уже подключен для интернет-магазинов, для других модулей его необходимо будет установить.
Установка
Итак, если у вас не установлен Awesome, разместите между тегами <head></head> на всех страницах сайта этот код:
Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Теперь на всех страницах сайта перед закрывающим тегом </body> (либо в одном из глобальных блоков, например, «Нижняя часть сайта») разместите этот скрипт:
Код
<script>
function _goTop() { $('<span id="go-top" class="fa fa-angle-up" title="Вверх!"></span>').appendTo('body'); $('#go-top').css({ 'opacity': '0', 'visibility': 'hidden' }); $(window).scroll(function() { if ($(this).scrollTop() > 500) { $('#go-top').css({ 'opacity': '1', 'visibility': 'visible' }); } else { $('#go-top').css({ 'opacity': '0', 'visibility': 'hidden' }); } }); $('#go-top').click(function() { $('body,html').animate({ scrollTop: 0 }, 800); return false });
}; _goTop();
</script>
Последним шагом будет установка стилей CSS в самый конец Таблицы стилей CSS:
Код
/* кнопка наверх -----*/ #go-top {background-color: #90A4AE; display: block; position: fixed; bottom: 20px; right: 20px; z-index: 9999; color: #fff; line-height: 30px; height: 30px; width: 30px; text-align: center; font-size: 16px; cursor: pointer; transition: all .3s ease; border-radius: 50%;
}
#go-top:hover { background: #4CAF50;
}
Настройка
Изменить значение, после которого появится кнопка при прокрутке, можно в этом месте скрипта:
Код
if ($(this).scrollTop() > 500) {
Вы также можете сменить иконку на любую нужную вам, просто измените класс fa-angle-up на класс другой иконки Awesome:
Код
$('<span id="go-top" class="fa fa-angle-up" title="Вверх!"></span>').appendTo('body');
2017-Мар-12 619 0
2017-Мар-17 629 4
2017-Мар-07 702 0
2017-Фев-22 1095 2