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