Делаем кнопку Наверх для сайта

Кнопка Наверх

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лаконичную простую кнопку Наверх можно добавить путем использования 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 подключена, первая строка не вписывается.

Иконки

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

Иконки

Плагины для WP

Некоторые плагины 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.

Понравилась статья? Поделитесь ею в соцсетях!