Как создать виджет с прокруткой вверх для вашего сайта?

Вернуться к началу или прокрутить вверх – это функция, позволяющая перейти к началу страницы, щелкнув стрелку, обычно расположенную в правом нижнем углу страницы. Для такой функции прокрутки вверх всегда необязательно использовать изображение. Поскольку каждое изображение отправляет отдельный 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, которую вы можете увеличивать или уменьшать.

Положение отображения значка прокрутки

Значок стрелки начнет отображаться, когда полоса прокрутки окажется на расстоянии 200 пикселей от верха, что определено в скрипте с помощью следующего кода:

Вы можете изменить исходное положение по своему усмотрению.

Положение значка

По умолчанию значок стрелки вверх отображается на 60 пикселей вверх и 55 пикселей от правого нижнего угла, как определено в стиле CSS. Вы можете изменить его методом проб и ошибок, чтобы проверить подходящую позицию для вашего сайта.

Стиль значка

Мы использовали отличный значок шрифта «fa-arrow-circle-up», который вы можете изменить в HTML-коде.

Обратитесь к разделу значков направления в списке значков font awesome, чтобы использовать альтернативный значок для вашего сайта.

Размер значка

По умолчанию 50 пикселей используются в качестве размера шрифта для значка в стиле CSS, который вы можете изменить по своему усмотрению.

Цвет значка

Это наиболее важная часть настройки, когда цвет значка шрифта можно легко изменить в соответствии с макетом вашего сайта. Найдите код «цвет: # 808080;» в коде CSS и измените его на любой цвет по своему усмотрению.