TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

32

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

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее