CSS / jQuery Виджет прокрутки вверх »WebNots
Вернуться к началу или прокрутить вверх — это функция, позволяющая перейти к началу страницы, щелкнув стрелку, обычно размещаемую в правом нижнем углу страницы. Для такой функции прокрутки вверх всегда необязательно использовать изображение. Поскольку каждое изображение отправляет на ваш сервер отдельный HTTP-запрос, это увеличивает общее время загрузки сайта, а настройка изображения также не очень проста. Чтобы преодолеть это, мы предлагаем следующий виджет с прокруткой вверх с CSS и jQuery со значком font awesome вместо изображения, чтобы вы могли настроить его в соответствии с макетом вашего сайта.
Виджет состоит из трех частей:
CSS-код для виджета Back To Top
Ниже приведен код CSS для виджета, который вставьте в раздел заголовка вашего сайта.
<style>
.backtotop {
background: none;
margin: 0;
position: fixed;
bottom: 0;
right: 0;
width: 55px;
height: 60px;
z-index: 100;
display: none;
text-decoration: none;
color: #808080;
}
.backtotop i {
font-size: 50px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">Вместо изображения мы используем значок font awesome, поэтому необходимый CSS связан соответствующим образом.
Скрипт jQuery для виджета
Ниже приведен скрипт для виджета, который необходимо разместить в нижнем колонтитуле вашего сайта.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.backtotop').css({'display': 'none'});
var offset = 200;
var duration = 600;
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('.backtotop').fadeIn(duration);
} else {
$('.backtotop').fadeOut(duration);
}
});
$('.backtotop').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>HTML для виджета
И, наконец, ниже приведен HTML-код, который нужно разместить внутри тела вашей веб-страницы, чтобы включить функцию возврата к началу страницы.
<a href="https://www.webnots.com/css-jquery-scroll-to-top-widget/#" class="backtotop" style="display: inline;"> <i class="fa fa-arrow-circle-up"></i> </a>
Настройка функций Back To Top
Преимущество использования этого виджета в том, что вы можете настроить всю функцию в соответствии с вашими потребностями. Вот некоторые из вариантов настройки для вас:
Скорость прокрутки
По умолчанию скорость прокрутки в скрипте равна 600, которую вы можете увеличивать или уменьшать.
| Характерная черта | Код | Где смотреть |
| Скорость прокрутки | var duration = 600; | Сценарий |
Положение отображения значка прокрутки
Значок стрелки начнет отображаться, когда полоса прокрутки окажется на расстоянии 200 пикселей от верха, что определено в скрипте с помощью следующего кода:
| Характерная черта | Код | Где смотреть |
| Начальное положение значка прокрутки | var offset = 200; | Сценарий |
Вы можете изменить исходное положение по своему усмотрению.
Положение значка
По умолчанию значок стрелки вверх отображается на 60 пикселей вверх и 55 пикселей от правого нижнего угла, как определено в стиле CSS. Вы можете изменить его методом проб и ошибок, чтобы проверить подходящую позицию для вашего сайта.
| Характерная черта | Код | Где смотреть |
| Положение значка прокрутки в правом нижнем углу | ширина: 55 пикселей; высота: 60 пикселей; | Стиль |
Стиль значка
Мы использовали отличный значок шрифта «fa-arrow-circle-up», который вы можете изменить в HTML-коде.
| Характерная черта | Код | Где смотреть |
| Вернуться к началу Стиль значка | HTML |
Обратитесь к разделу значков направления в значках font awesome список использовать альтернативный значок для вашего сайта.
Размер значка
По умолчанию 50 пикселей используются в качестве размера шрифта для значка в стиле CSS, который вы можете изменить по своему усмотрению.
| Характерная черта | Код | Где смотреть |
| Вернуться к началу Размер значка | размер шрифта: 50 пикселей; | Стиль |
Цвет значка
Это наиболее важная часть настройки, когда цвет значка шрифта можно легко изменить в соответствии с макетом вашего сайта. Найдите код «цвет: # 808080;» в коде CSS и измените его на любой цвет по своему усмотрению.
| Характерная черта | Код | Где смотреть |
| Вернуться к началу Цвет значка | цвет: # 808080; | Стиль |
