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

Кнопка наверх для сайта — очень популярная и нужная фича практически для любого интернет ресурса.

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

В данной статье рассмотрим реализацию кнопки наверх для сайта в чистом коде html. Такая реализация позволит интегрировать кнопку в любой сайт на практически любой CMS (WordPress, OpenCart, Joomla, Drupal, Modx etc.)

HTML

Сама кнопка является обычным div-ом c id=»up»

<div id="up"></div>

Добавим немного стилизации. Кнопка наверх для сайта имеет на странице фиксированное положение. Обычно это нижняя левая или правая часть. Зависит от наличия и размещения на странице других фиксированных элементов — чатов, мессенджеров, кнопок «Перезвоните мне» и т.п.

Как сделать кнопки мессенджеров на сайт читайте в статье «Кнопки мессенджеров на сайт бесплатно самостоятельно».

CSS

Код стилей:

body {
    min-height: 2000px;
  }
  #up {
    display: block;
    background-color: transparent;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: #bbb;
    text-align: center;
    position: fixed;
    bottom: 20px;
    left: 20px;
    opacity: 0;
    -webkit-transition: all .3s;
    transition: all .3s;
    z-index: 9999;
    cursor: pointer;
  }
  #up:before {
    content: '↑';
    font-family: sans-serif;
    font-size: 30px;
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  #up.show {
    opacity: 0.5;
  }
  #up.show:hover {
    opacity: 1;
  }

Для работы кнопки на сайте должна быть установлена библиотека jQuery. Если ее еще нет у вас, то подключить библиотеку можно через cdn

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

JavaScript

И сам скрипт для работы кнопки наверх для сайта:

var btn = $('#up'); //создаем переменную для кнопки

    $(window).scroll(function() {
      if ($(window).scrollTop() > 500) { //отслеживаем высоту от верха страницы в 500px
        btn.addClass('show'); // присваиваем кнопке класс show для управления видимостью
      } else {
        btn.removeClass('show'); // если меньше 500px от верха страницы убираем класс show
      }
    });

    btn.on('click', function(e) {
      e.preventDefault();
      $('html, body').animate({scrollTop:0}, '300'); //при клике на кнопку плавно прокручиваем до верха body
    });

Полный код примера можно посмотреть и взять в моем Codepen.

Кнопку можно стилизовать как вам только позволит воображение)
Устанавливать любой фон, размеры, положение, вставлять в нее изображения, стрелки и т.п.

Я устанавливаю кнопку наверх для сайта на каждому клиенту автоматическим бонусом при верстке всех проектов. Считается правилом хорошего тона — сделать для клиента чуть больше чем изначально договаривались. Создание кнопки наверх для сайта занимает не более 5 минут, а полезности при этом очень много)

Если у вас есть более элегантные решения реализации кнопки в чистом коде — буду рад увидеть их в комментариях.

Если вы создаете свой сайт и не определились с чего начать, прочитайте статью «На чем сделать сайт новичку».

Как самостоятельно и совершенно бесплатно создать свой сайт на самой популярной CMS в мире WordPress написано здесь.

Всем добра!