5 простых способов добавить кнопку наверх на сайт: пошаговый код

Для кого эта статья:

• Веб-разработчики и программисты, желающие улучшить свои навыки в создании UX-элементов
• Владельцы и администрации сайтов, желающие повысить удобство навигации на своих ресурсах

• Студенты и начинающие специалисты в области веб-дизайна и разработки, ищущие практические решения для своих проектов

  Длинные страницы — настоящая проблема для пользователей. Они прокручивают контент вниз, но когда нужно вернуться к началу — приходится выполнять утомительный скролл в обратном направлении. Кнопка "Наверх" решает эту задачу одним кликом, повышая удобство использования сайта и удержание посетителей. Я изучил все популярные способы добавления этого элемента и собрал пять проверенных решений с готовым кодом, который можно сразу вставить на ваш сайт. От минималистичного CSS до продвинутых JavaScript-анимаций — выбирайте то, что соответствует вашим навыкам и потребностям. 🚀

Осваиваете веб-разработку и хотите не просто копировать готовые решения, а понимать, как они работают изнутри? Обучение веб-разработке от Skypro даёт именно те практические навыки, которые позволят вам создавать интерактивные элементы любой сложности — от простых кнопок "Наверх" до комплексных интерфейсов. На курсе вы научитесь писать чистый код и реализовывать современные UX-решения, которые выделят ваши проекты среди конкурентов.

Зачем нужна кнопка наверх и как она улучшает UX сайта

Кнопка "Наверх" (Scroll to Top, Back to Top) — это навигационный элемент, позволяющий пользователю одним нажатием вернуться в начало страницы. Такая функциональность особенно ценна для сайтов с длинными страницами: интернет-магазинов, блогов, новостных порталов и лендингов.

Исследования показывают, что 76% пользователей испытывают раздражение при необходимости многократно прокручивать страницу, чтобы вернуться к верхней навигации. Каждое лишнее действие увеличивает вероятность того, что посетитель покинет сайт, не выполнив целевое действие.

Алексей Морозов, UX-дизайнер

Работая над редизайном крупного информационного портала, мы заметили, что средняя глубина прокрутки страницы составляла 2800 пикселей, но при этом большинство пользователей возвращались к верхнему меню для перехода между разделами. После добавления анимированной кнопки "Наверх" среднее время сессии увеличилось на 14%, а показатель отказов снизился на 8%. Особенно заметный эффект наблюдался на мобильных устройствах, где скролл требует больше физических усилий.

Вот ключевые преимущества, которые даёт кнопка "Наверх" для UX вашего сайта:

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

Теперь, когда мы понимаем важность кнопки "Наверх", давайте рассмотрим пять практических способов её реализации, начиная с самых простых. 🔍

Реализация кнопки наверх на чистом HTML и CSS

Простейший способ добавить кнопку "Наверх" не требует JavaScript. Для начала создадим базовую структуру с использованием только HTML и CSS. Такое решение идеально подходит для простых сайтов или случаев, когда вы хотите минимизировать количество скриптов.

Вот базовый код для фиксированной кнопки в правом нижнем углу экрана:

<!-- HTML-код кнопки -->
<a href="#top" class="scroll-top-button">↑</a>

<!-- CSS-стили -->
<style>
.scroll-top-button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #007BFF;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
line-height: 40px;
font-size: 20px;
text-decoration: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
opacity: 0.7;
transition: opacity 0.3s;
}

.scroll-top-button:hover {
opacity: 1;
}
</style>

Этот код создаёт простую круглую кнопку со стрелкой, которая всегда остаётся видимой в правом нижнем углу экрана. При клике на неё пользователь моментально перемещается к началу страницы благодаря якорной ссылке #top.

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

<!-- HTML-код кнопки -->
<a href="#top" id="scroll-button" class="scroll-top-button hidden">↑</a>

<!-- CSS-стили с добавлением класса hidden -->
<style>
.scroll-top-button {
/* Те же стили, что и выше */
transition: opacity 0.3s, visibility 0.3s;
}

.scroll-top-button.hidden {
opacity: 0;
visibility: hidden;
}
</style>

<!-- Простой JavaScript для показа/скрытия кнопки -->
<script>
window.onscroll = function() {
var button = document.getElementById('scroll-button');
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
button.classList.remove('hidden');
} else {
button.classList.add('hidden');
}
};
</script>

Преимущество этого подхода — его простота и скорость загрузки. Однако, у него есть ограничения:

• Якорные ссылки не обеспечивают плавной прокрутки
• Кнопка может работать некорректно на страницах с динамически загружаемым контентом
• Сложно реализовать дополнительные эффекты появления и исчезновения

Вы можете кастомизировать внешний вид кнопки, изменив такие параметры как:

• Размер и форму (через width, height, border-radius)
• Цвет фона и текста (background-color, color)
• Тень (box-shadow)
• Отступы от краёв экрана (bottom, right)
• Символ стрелки (можно заменить на изображение или иконочный шрифт)

Для более контролируемого и плавного поведения рекомендую использовать JavaScript, о чём мы поговорим в следующем разделе. ⬇️

JavaScript-решения для плавного скролла к началу страницы

Использование JavaScript для реализации кнопки "Наверх" даёт нам больший контроль над поведением и анимацией. Плавный скролл значительно улучшает впечатление пользователя, делая навигацию более естественной и приятной.

Вот элегантное решение с плавной анимацией:

<!-- HTML-код кнопки -->
<button id="scroll-top-btn" title="Вернуться наверх">↑</button>

<!-- CSS-стили -->
<style>
#scroll-top-btn {
display: none;
position: fixed;
bottom: 25px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: #555;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 50%;
font-size: 18px;
width: 50px;
height: 50px;
transition: all 0.3s ease;
}

#scroll-top-btn:hover {
background-color: #333;
transform: translateY(-3px);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
</style>

<!-- JavaScript для функционала -->
<script>
// Появление/исчезновение кнопки
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
var btn = document.getElementById("scroll-top-btn");
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
}

// Плавная прокрутка наверх
document.getElementById("scroll-top-btn").addEventListener("click", function() {
scrollToTop(800); // 800 мс – длительность анимации
});

function scrollToTop(duration) {
const startPosition = window.pageYOffset;
const startTime = performance.now();

function scrollStep(timestamp) {
const currentTime = timestamp – startTime;
const progress = Math.min(currentTime / duration, 1);

window.scrollTo(0, startPosition * (1 – easeInOutCubic(progress)));

if (currentTime < duration) {
window.requestAnimationFrame(scrollStep);
}
}

// Функция плавности
function easeInOutCubic(t) {
return t < 0.5 
? 4 * t * t * t 
: (t – 1) * (2 * t – 2) * (2 * t – 2) + 1;
}

window.requestAnimationFrame(scrollStep);
}
</script>

Михаил Ветров, Front-end разработчик

На одном из проектов нашего интернет-магазина мы столкнулись с интересной проблемой. Длинные страницы с товарами отлично конвертировали, но аналитика показала, что многие пользователи не возвращаются к меню категорий после просмотра. Мы добавили умную кнопку "Наверх", которая появлялась только после прокрутки 60% страницы и анимировала движение с замедлением в конце. Этот небольшой элемент повысил возврат в каталог на 22% и увеличил среднее количество просматриваемых категорий с 2.3 до 3.1 за сессию. Главное открытие: даже простые UX-решения могут значительно влиять на поведение пользователей, если они появляются в нужный момент и правильно взаимодействуют с пользователем.

Приведенный выше код имеет несколько ключевых преимуществ:

• Плавная анимация прокрутки с эффектом замедления в конце
• Кнопка появляется только когда пользователь прокрутил страницу на определенное расстояние
• Визуальная обратная связь при наведении (эффект поднятия и тени)
• Работает на всех современных браузерах

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

document.getElementById("scroll-top-btn").addEventListener("click", function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});

Это более короткий код, но он имеет ограниченную поддержку в старых браузерах, хотя работает отлично в современных.

Вы также можете настроить дополнительные параметры для вашей кнопки:

Теперь рассмотрим, как упростить процесс с помощью готовых плагинов для популярных CMS. 🧩

Готовые плагины для добавления кнопки наверх в CMS

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

Рассмотрим лучшие решения для наиболее распространенных платформ:

WordPress

Для WordPress существует несколько отличных плагинов:

• WP Scroll to Top — минималистичный плагин с настраиваемым внешним видом и анимацией
• Smooth Scroll Up — предлагает 10+ стилей кнопок и различные эффекты появления
• Easy Back To Top — легковесный плагин с мобильной оптимизацией

Процесс установки прост:

1. В админ-панели WordPress перейдите в раздел "Плагины > Добавить новый"
2. Введите название нужного плагина в поиске
3. Нажмите "Установить", а затем "Активировать"
4. Найдите настройки плагина (обычно в разделе "Внешний вид" или "Настройки")
5. Настройте внешний вид и поведение кнопки

Например, для плагина WP Scroll to Top вы можете настроить:

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

Joomla

Для Joomla рекомендую обратить внимание на:

• JA Back to Top — бесплатное и гибкое решение с множеством опций
• CS Scroll to Top — минималистичный модуль с хорошей оптимизацией

Drupal

Пользователи Drupal могут воспользоваться:

• Scroll to Top — полностью интегрируется с системой тем Drupal
• Back to Top — предлагает расширенные возможности настройки

Shopify

Для интернет-магазинов на Shopify:

• Большинство современных тем уже имеют встроенную кнопку "Наверх"
• В Theme Customizer можно найти настройки в разделе "Theme settings > Advanced"
• Приложение "Scroll to Top Button" из Shopify App Store

При выборе плагина обращайте внимание на следующие критерии:

• Скорость работы — плагин не должен замедлять ваш сайт
• Регулярность обновлений — показатель того, что плагин поддерживается
• Совместимость с мобильными устройствами — критически важно для современных сайтов
• Настройки кастомизации — возможность подстроить под дизайн вашего сайта
• Отзывы пользователей — рейтинг и комментарии помогут избежать проблемных решений

Если ни один из готовых плагинов не соответствует вашим требованиям, переходите к следующему разделу, где мы рассмотрим продвинутые техники кастомизации. ✨

Продвинутые техники кастомизации кнопки возврата вверх

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

Анимированные кнопки с CSS

Современный CSS позволяет создавать сложные анимации без JavaScript. Вот пример пульсирующей кнопки:

<!-- HTML -->
<button id="fancy-top-button">
<svg viewBox="0 0 24 24" width="24" height="24">
<path d="M7 14l5-5 5 5z" fill="currentColor" />
</svg>
</button>

<!-- CSS -->
<style>
#fancy-top-button {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(145deg, #6e48aa, #9d50bb);
border: none;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(157, 80, 187, 0.4);
transition: all 0.3s;
opacity: 0;
animation: pulse 2s infinite;
z-index: 999;
}

@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 4px 15px rgba(157, 80, 187, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(157, 80, 187, 0.6);
}
100% {
transform: scale(1);
box-shadow: 0 4px 15px rgba(157, 80, 187, 0.4);
}
}

#fancy-top-button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(157, 80, 187, 0.7);
animation: none;
}

#fancy-top-button.show {
opacity: 1;
}
</style>

Прогресс-бар прокрутки

Продвинутый вариант — комбинирование кнопки "Наверх" с индикатором прокрутки, показывающим пользователю, насколько он продвинулся по странице:

<!-- HTML -->
<div id="progress-container">
<div id="progress-bar"></div>
</div>
<button id="top-button" class="with-progress">↑</button>

<!-- CSS -->
<style>
#progress-container {
position: fixed;
top: 0;
z-index: 100;
width: 100%;
height: 5px;
background: transparent;
}

#progress-bar {
height: 5px;
background: #4CAF50;
width: 0%;
}

#top-button {
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: white;
color: #333;
cursor: pointer;
padding: 15px;
border-radius: 50%;
font-size: 18px;
width: 50px;
height: 50px;
transition: all 0.3s;
opacity: 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#top-button.with-progress::before {
content: '';
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid #f3f3f3;
}

#top-button.with-progress::after {
content: '';
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #4CAF50;
animation: spin 1s linear infinite;
opacity: 0;
transition: opacity 0.3s;
}

#top-button:hover {
background-color: #f8f8f8;
}

#top-button.active {
opacity: 1;
}

#top-button.scrolling::after {
opacity: 1;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>

<!-- JavaScript -->
<script>
// Обновление прогресс-бара
window.onscroll = function() {
// Прогресс прокрутки в процентах
let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
let height = document.documentElement.scrollHeight – document.documentElement.clientHeight;
let scrolled = (winScroll / height) * 100;
document.getElementById("progress-bar").style.width = scrolled + "%";

// Отображение кнопки
let button = document.getElementById("top-button");
if (winScroll > 300) {
button.classList.add("active");
} else {
button.classList.remove("active");
}
};

// Плавная прокрутка вверх с анимацией кнопки
document.getElementById("top-button").addEventListener("click", function() {
this.classList.add("scrolling");

const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c – c / 8);
} else {
this.classList.remove("scrolling");
}
};
scrollToTop();
});
</script>

Контекстно-зависимые кнопки

Продвинутый подход — это создание кнопки, которая меняет свое поведение в зависимости от контекста:

• На длинных страницах блога — стандартная кнопка "Наверх"
• На страницах продуктов — кнопка "Вернуться к характеристикам/отзывам"
• На странице корзины — кнопка "Продолжить покупки", ведущая в каталог

Такой подход требует более сложной логики JavaScript, но значительно улучшает удобство использования сайта.

Кнопки с микровзаимодействиями

Микровзаимодействия делают интерфейс живым и отзывчивым. Для кнопки "Наверх" это могут быть:

• Изменение иконки при наведении (например, стрелка "распрямляется")
• Эффект "материального дизайна" с рябью при нажатии
• Анимация перехода между состояниями видимости
• Звуковые эффекты (используйте их осторожно)

Вот краткое сравнение различных подходов к кастомизации:

При выборе уровня кастомизации всегда придерживайтесь баланса между эстетикой и производительностью. Помните, что главная задача кнопки "Наверх" — быть удобной и заметной, а не отвлекать пользователя от содержимого сайта. 🎨

Добавление кнопки "Наверх" на сайт — это не просто технический трюк, а важный элемент заботы о пользователе. Как показывает практика, именно такие мелкие детали часто определяют, вернётся ли посетитель на ваш сайт. Выбирайте решение, соответствующее вашим техническим навыкам и особенностям проекта. Самое важное — протестировать работу кнопки на различных устройствах и убедиться, что она действительно делает навигацию более удобной, а не становится раздражающим элементом. Помните: хороший UX не кричит о себе, а незаметно решает проблемы пользователя.