Вернуться к началу или прокрутить вверх – это функция, позволяющая перейти к началу страницы, щелкнув стрелку, обычно расположенную в правом нижнем углу страницы. Для такой функции прокрутки вверх всегда необязательно использовать изображение. Поскольку каждое изображение отправляет отдельный HTTP-запрос на ваш сервер, это увеличивает общее время загрузки сайта, а настройка изображения также не очень проста. Чтобы решить эту проблему, мы предлагаем виджет с прокруткой вверх с CSS и jQuery со значком font awesome вместо изображения, чтобы вы могли настроить его в соответствии с макетом вашего сайта.
Связанный: Как добавить виджет прокрутки вверх на сайте Weebly?
Виджет состоит из трех частей:
- CSS
- Сценарий
- HTML
1 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 связан соответствующим образом.
2 скрипт 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>
3 HTML для виджета
И, наконец, ниже приведен HTML-код, который нужно разместить внутри тела вашей веб-страницы, чтобы включить функцию возврата к началу страницы.
<a href="#" class="backtotop" style="display: inline;">
<i class="fa fa-arrow-circle-up"></i>
</a>
Настройка функций Back To Top
Преимущество использования этого виджета в том, что вы можете настроить всю функцию в соответствии с вашими потребностями. Вот некоторые из вариантов настройки для вас:
Скорость прокрутки
По умолчанию скорость прокрутки в скрипте установлена равной 600, которую вы можете увеличивать или уменьшать.
Характерная черта | Код | Где смотреть |
Скорость прокрутки | var duration = 600; | Сценарий |
Положение отображения значка прокрутки
Значок стрелки начнет отображаться, когда полоса прокрутки окажется на расстоянии 200 пикселей от верха, что определено в скрипте с помощью следующего кода:
Характерная черта | Код | Где смотреть |
Начальное положение значка прокрутки | было смещение = 200; | Сценарий |
Вы можете изменить исходное положение по своему усмотрению.
Положение значка
По умолчанию значок стрелки вверх отображается на 60 пикселей вверх и 55 пикселей от правого нижнего угла, как определено в стиле CSS. Вы можете изменить его методом проб и ошибок, чтобы проверить подходящую позицию для вашего сайта.
Характерная черта | Код | Где смотреть |
Положение значка прокрутки в правом нижнем углу | ширина: 55 пикселей; высота: 60 пикселей; | Стиль |
Стиль значка
Мы использовали отличный значок шрифта «fa-arrow-circle-up», который вы можете изменить в HTML-коде.
Характерная черта | Код | Где смотреть |
Вернуться к началу Стиль значка | <i class = “fa fa-arrow-circle-up”> </i> | HTML |
Обратитесь к разделу значков направления в списке значков font awesome, чтобы использовать альтернативный значок для вашего сайта.
Размер значка
По умолчанию 50 пикселей используются в качестве размера шрифта для значка в стиле CSS, который вы можете изменить по своему усмотрению.
Характерная черта | Код | Где смотреть |
Вернуться к началу Размер значка | размер шрифта: 50 пикселей; | Стиль |
Цвет значка
Это наиболее важная часть настройки, когда цвет значка шрифта можно легко изменить в соответствии с макетом вашего сайта. Найдите код «цвет: # 808080;» в коде CSS и измените его на любой цвет по своему усмотрению.
Характерная черта | Код | Где смотреть |
Вернуться к началу Цвет значка | цвет: # 808080; | Стиль |