Делаем кнопку Вверх для сайта вручную, а также с помощью плагинов WordPress

Кнопка Вверх для сайта

Чтобы обеспечить удобство пользования сайтом, интернет-магазином или лендингом, рекомендуется использовать такую опцию, как кнопка «Вверх». Это упрощает пользование ресурсом, на котором размещено много тестовых и графических блоков, повышает лояльность пользователя к продукту. Есть разные варианты таких кнопок, которые подбираются с учетом целей и задач, дизайна.

Для чего нужна кнопка Вверх для сайта?

Кнопка Вверх очень часто используется на объемных многостраничных ресурсах с большими объемами текстов. Нажимая эту кнопку,  пользователь может сразу подняться в самый верх ресурса и не прокручивать всю страницу, что занимает некоторое время. То есть, эта опция повышает юзабилити (простоту и удобство) пользования сайтом, порталом, лендингом, интернет-магазином.

Польза для посетителей

Кнопка Вверх помогает быстро перемещаться по экрану без лишних усилий. Например, он читает достаточно длинный текст на сайте, и потом хочет подняться вверх – чтобы перейти на другой раздел или посмотреть контакты и другую информацию, расположенную в шапке. Ему нужно скроллить (прокручивать) текст или же упростить все и использовать кнопку Вверх.

Такие элементы делают работу пользователя с ресурсом более комфортной. Если при разработке и наполнении сайта все продумано и ориентировано на пользователя, это повышает лояльность к предлагаемым товарам и услугам, увеличивает объемы продаж.

Для чего нужна кнопка Вверх

Польза для сайта

Удобство пользования ресурсом является одним из важнейших факторов ранжирования. В частности, Яндекс, являющийся наиболее популярной поисковой системой рунета, ставит во главу угла именно поведенческие факторы.

Если обеспечить пользователю комфорт нахождения на сайте, он будет с удовольствием читать его, переходя со страницы на страницу (чем повышает глубину просмотра и повышает рейтинг ресурса). Кроме того, если сайт удобный и полезный, пользователь будет снова возвращаться на него, что также учитывается при ранжировании поисковиками.

Когда кнопка не нужна?

Если на сайте нет длинных постов, статей  и публикаций, для прочтения которых нужно долго прокручивать колесиков вниз страницы. В тех случаях, когда контент на информационных сайтах и блогах размещается не в одно полотно на странице, а структурируется по подразделам.

Простая кнопка

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

Код кнопки будет складываться из 2 элементов – html-ссылки, которая вставляется в код сайта и CSS-стиля.

Для активации функции нужно добавить на страницу (в тег body) такой код:

<a href="#" title="Вернуться вверх" class="buttonup"><img src="путь к картинке/картинка.png"></a>

Нужно использовать определенную картинку, которая и будет кнопкой Вверх. В надписи кода прописывается ваш путь к изображению и его название.

Для задания стилей и параметров кнопки в конце файла style.css добавляется такой код:

buttonup {
width:88px; 
height:118px;
position:fixed;
bottom:20px;
right:50px;
}

Таким образом, можно регулировать положение кнопки. Параметр width задает ширину изображения, bottom – расстояние от нижней части экрана, right – от правого поля экрана.

Плюсы метода:

  • Простота и удобство настройки.
  • Отсутствие необходимости задействовать сложные скрипты (программы, автоматизирующие определенные задачи), библиотеки.

Минусы:

  • Постоянное отображение кнопки (что может раздражать пользователя).
  • Стремительный подъем вверх (не плавный).

Плавающая

Это более удобный вариант. Кнопка не видна постоянно при прочтении контента, а появляется тогда, когда пользователь спустился вниз экрана.

Плюсы плавающей кнопки:

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

Минусы – более сложная установка и настройка.

Как сделать плавающую кнопку Вверх?

Через jQuery

Для подключения плавающей кнопки Вверх используется библиотека jQuery. Если сайт создан на WordPress или аналогичной CMS, такая библиотека должна быть уже установлена. Если нет, впишите в онлайн ресурса такую строчку:

<script type="text/javascript" src="https://yastatic.net/jquery/2.1.3/jquery.min.js"></script>

Через скрипт

После подключения библиотеки jQuery нужно подключить скрипт, который будет выводить на экран кнопку Вверх. Код скрипта вставляется в теги или же скрипт загружается на хостинг отдельным файлом, а в коде страницы прописывается его запуск.

Для вписывания кода в сайт можно использовать такой скрипт:

<script type="text/javascript">
jQuery(document).ready(function($){
    $('<style>'+
        '.scrollTop{ display:none; z-index:9999; position:fixed;'+
            'bottom:20px; left:90%; width:88px; height:125px;'+
            'background:url(ПУТЬ К ФАЙЛУ, ГДЕ ЛЕЖИТ КАРТИНКА) 0 0 no-repeat; }' +
        '.scrollTop:hover{ background-position:0 -133px;}'
    +'</style>').appendTo('body');
    var
    speed = 550,
    $scrollTop = $('<a href="#" class="scrollTop">').appendTo('body');		
    $scrollTop.click(function(e){
        e.preventDefault();
        $( 'html:not(:animated),body:not(:animated)' ).animate({ scrollTop: 0}, speed );
    });

    //появление
    function show_scrollTop(){
        ( $(window).scrollTop() > 330 ) ? $scrollTop.fadeIn(700) : $scrollTop.fadeOut(700);
    }
    $(window).scroll( function(){ show_scrollTop(); } );
    show_scrollTop();
});
</script>

Если скрипт добавляется отдельным файлом, то код прописывается между тегами . Файл размещается на хостинге и для его подключения в заголовке сайта вписывается такая строка:

<script type="text/javascript" src="https://ПУТЬ К ФАЙЛУ/НАЗВАНИЕ ФАЙЛА">

Установка кнопки Вверх с иконками Fontawesome

Шрифт Font Awesome – это коллекция масштабируемых иконок, которые были разработаны для уникализации дизайна веб-страниц. Это разные варианты изображений, которые форматируются с изменением цвета, размера и других параметров.

Установка кнопки Вверх с иконками Font Awesome

Чтобы подключить доступ к иконкам, введите код:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Html

<div id="button-up">
    <i class="fa fa-chevron-up"></i>	
</div>

CSS

#button-up{
  display: none;
  position: fixed;
  right: 20px;
  bottom: 100px;			
  color: #fff;
  background-color: #000;
  text-align: center;
  font-size: 30px;
  padding: 15px;
  transition: .3s;
}
 
#button-up:hover{
  cursor: pointer;
  background-color: #FF0000;
  transition: .3s;
}

Кнопки Вверх и Вниз

Если на сайте расположены объемные статьи или есть много разделов, для прочтения которых нужно много скроллить экран вверх-вниз, рекомендуется использовать кнопки Вверх и Вниз – для удобства пользователей.

Кнопки вверх и вниз

Html

<div id="arrows_site">
  <div class="go-up" title="Вверх" id='ToTop'>⇧</div>
  <div class="go-down" title="Вниз" id='OnBottom'>⇩</div>
</div>

CSS

#arrows_site{
  position: fixed;
  width: 30px;
  background: #555;	
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;		
}
 
.go-up, .go-down {
  display: none;
  position: fixed;
  left: 0;
  cursor: pointer;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  opacity: .4;
  font-size: 30px;
  margin-bottom: 5px;
  width: 30px;
  height: 30px;
  transition: .4s;
}
.go-up { bottom: 50%; }
.go-down { bottom: 45%; }
.go-down:hover,
.go-up:hover {
  opacity: 1;    
}

jQuery

<script>
  if ($(window).scrollTop() >= 150) $("#ToTop").fadeIn(800);
  $(window).scroll(function(){
      if ($(window).scrollTop() <= 150) $("#ToTop").fadeOut(800);
      else $("#ToTop").fadeIn(800);
  });
 
  if ($(window).scrollTop() <= $(document).height()) $("#OnBottom").fadeIn(800);
  $(window).scroll(function(){
      if ($(window).scrollTop() >= $(document).height()) $("#OnBottom").fadeOut(800);
      else $("#OnBottom").fadeIn(800);
  });
 
  $("#ToTop").click(function(){$("html,body").animate({scrollTop:0}, 800)});
  $("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()}, 800)});	
</script>

Полупрозрачная

Для удобного скроллинга подходит полупрозрачная кнопка, которая появляется по центру экрана при прокрутке страницы. Для ее реализации задействуются Html, JQuery и CSS.

Html

Чтобы кнопка работала, весь текст на прокручиваемой странице помещается между тегами:

<div id="top"></div>
<!-- здесь должно находится основное содержимое страницы -->
<div id="message"><a href="#top">Scroll to top</a></div>

CSS

Потом в в файл CSS стилей ресурса вставляется следующий код:

#message a
{
/* display: block before hiding */
display: block;
display: none;
/* link is above all other elements */
z-index: 999;
/* link doesn't hide text behind it */
opacity: .8;
/* link stays at same place on page */
position: fixed;
/* link goes at the bottom of the page */
top: 100%;
margin-top: -80px; /* = height + preferred bottom margin */
/* link is centered */
left: 50%;
margin-left: -160px; /* = half of width */
/* round the corners (to your preference) */
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
/* make it big and easy to see (size, style to preferences) */
width: 300px;
line-height: 48px;
height: 48px;
padding: 10px;
background-color: #000;
font-size: 24px;
text-align: center;
color: #fff;

jQuery

Потом подключается jQuery, между тегами … вписывается следующий код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
/* set variables locally for increased performance */
var scroll_timer;
var displayed = false;
var $message = $('#message a');
var $window = $(window);
var top = $(document.body).children(0).position().top;
/* react to scroll event on window */
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() <= top)
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
}
}, 100);
});
});
</script>

Если к ресурсу библиотека jQuery подключена, первая строка не вписывается.

Иконки

Можно выбрать разные варианты стрелок для кнопки Вверх – статичную (неизменяющуюся) картинку или изображение, которое будет меняться, когда на него наводят курсором. Часто используются варианты, в которых одна часть изображения полупрозрачная (используется для стрелки в неактивном состоянии), а вторая аналогичная, но более яркая.

Иконки

Плагины для WordPress

Некоторые плагины WordPress, предназначенные для создания кнопки Вверх:

  1. WPFront Scroll Top. Позволяет создавать кнопки для легкой прокрутки вверх. Кнопка при скроллинге отображается. Плагин дает возможность использовать иконки  Font Awesome, создавать свой текст или изображение. Есть опция авто-скрытия.
  2. Easy Smooth Scroll Links. Плагин для добавления плавной кнопки Вверх, в котором можно установить скорость прокрутки, применить разные анимационные эффекты прокрутки (из 30 предложенных вариантов). Работает на всех основных браузерах.
  3. jQuery Smooth Scroll. С помощью этого плагина можно добавлять кнопку Вверх, которая появляется через некоторое время после начала скроллинга. При поднятии вверх автоматически скрывается. Обеспечивает плавную прокрутку. Имеет простую настройку, сжатие файлов CSS и JS (чтобы не ухудшать скорость загрузки ресурса).
  4. Scroll Back to Top. Плагин для добавления кнопки Вверх, появляющейся после прокрутки страницы вниз. Позволяет настроить анимацию и положение графического элемента. Плагин прост в использовании, не требует внесения изменений в разметку или теме.
  5. Smooth Scroll Up. С этим плагином можно выбрать разные типы кнопок Вверх (картинку, иконку), используя библиотеки или загружая собственные изображения. Этот плагин позволяет включать и отключать кнопку на некоторых страницах, на мобильных устройствах, задавать параметры расположения элемента.

Кнопка Вверх – это очень удобный функциональный элемент, который упрощает пользование ресурсом. Такой функционал рекомендуется использовать для информационных и коммерческих сайтов, лендингов, интернет-магазинов, на которых расположено много текстовых блоков или другого контента.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Понравилась статья? Сохраните ее в своих соцсетях: