Кнопка наверх на сайте и 7 ошибок, которые её портят

Кнопка наверх на сайте считается элементом, который невозможно испортить: поставил стрелочку и свободен. Жаль, но это не так. Я сравнил 25 сайтов с разными реализациями (это мои личные замеры, не лабораторное исследование). Аккуратная кнопка пригодилась в 8-12% сессий, а крикливая только в 2-3%. Зато около 15% посетителей кликали по ней случайно и злились.

За 15 лет в вебе я насмотрелся на всякое. Ниже расскажу, где кнопку лучше выкинуть, где оставить и как сделать так, чтобы о ней вспоминали ровно тогда, когда она нужна. Заодно разберём четыре мифа и один клиентский оранжевый кошмар.

Нужна ли кнопка наверх на сайте и четыре мифа вокруг неё

Миф 1. «Кнопка нужна любому сайту». Лендинг на два экрана с кнопкой «наверх» это как стояночный тормоз на самокате: механизм есть, смысла нет. Она нужна на длинных страницах, в блогах, статьях от 2000 слов и каталогах. На коротких страницах, лендингах с якорной навигацией и SPA со своей навигацией её можно смело убрать. В дизайн-системе Red Hat тоже считают, что на очень короткой странице кнопка не обязательна.

Миф 2. «Чем больше и ярче, тем лучше». Гуру любят формулу «чтобы точно заметили». Только вот огромная кнопка перекрывает текст и приносит не клики, а раздражение. Я держу размер в 40-50 px, а цвет подбираю в стиле сайта. Честности ради, в некоторых готовых компонентах советуют 48-64 px, так что это ориентир, а не закон природы. Кнопка должна быть как хороший швейцар. Вы вспоминаете о нём, когда он нужен, а не когда он машет флажками у входа.

Миф 3. «Кнопка должна быть видна сразу». На первом экране она мусор в интерфейсе. Человек только пришёл, и куда ему наверх? Стандарт такой, что кнопка появляется после прокрутки на 300-500 px. В справочниках по интерфейсам тоже советуют показывать её только после заметной прокрутки.

Миф 4. «Мгновенный скролл это нормально». Мгновенный прыжок дезориентирует, будто вас телепортировали между этажами. Плавная анимация в 300-500 мс объясняет пользователю, что произошло. Такую же длительность рекомендуют в сборниках UX-паттернов. И раз уж речь про UX скролл, уважайте настройку prefers-reduced-motion, потому что не всем анимация в радость.

Кейс про оранжевую кнопку 80 на 80

Вот вам история. На одном из проектов клиент поставил огромную оранжевую кнопку 80 на 80 пикселей, и появлялась она сразу. Аргумент был железный, «чтобы точно заметили». Заметили, ещё как.

По данным глубины прокрутки после клика, 23% нажатий были случайными. Люди тыкали в кнопку, не собираясь никуда лететь, а потом искали, где они были на странице. Мы уменьшили её до 45 px и сделали появление после 400 px прокрутки. Жалобы прекратились.

Вывод простой. Кнопка, которую видно с другого конца комнаты, это не удобство, а сигнальная ракета. Хорошая кнопка работает как выключатель в вашей квартире. Вы не любуетесь им, вы просто попадаете в него в темноте.

Как сделать scroll to top кнопку, которую никто не заметит

Параметры, которые я считаю рабочими.

• Размер 40-50 px.
• Появление после 300-500 px прокрутки.
• Позиция в правом нижнем углу с отступом 20-30 px. Пользователи ждут кнопку именно там.
• Анимация прокрутки 300-500 мс.
• Небольшое изменение прозрачности при наведении.
• На мобильных кнопка меньше и ближе к краю, чтобы не перекрывать контент.

И готовый код, который можно забирать.

.scroll-top {
  position: fixed; bottom: 20px; right: 20px;
  width: 45px; height: 45px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.scroll-top.visible { opacity: 0.7; pointer-events: auto; }
.scroll-top:hover { opacity: 1; }

const b = document.querySelector('.scroll-top');
addEventListener('scroll', () => b.classList.toggle('visible', scrollY > 400));
b.addEventListener('click', () => scrollTo({ top: 0, behavior: 'smooth' }));

Одна оговорка, на которой спотыкаются многие. Кнопка с нулевой прозрачностью всё равно ловит клики, поэтому pointer-events в коде не для красоты.

Куда вставлять код

Нужны три кусочка, и без любого из них кнопка не заработает.

1. HTML. Добавьте перед закрывающим тегом body такую строку: <button class="scroll-top" aria-label="Наверх">↑</button>. Атрибут aria-label нужен, чтобы скринридер понимал, что это за стрелочка.
2. CSS. Положите стили в основной файл стилей сайта. Если у вас WordPress, то путь такой: Внешний вид → Настроить → Дополнительный CSS.
3. JS. Вставьте скрипт в основной файл скриптов или в тег script перед закрывающим body, уже после кнопки. Иначе querySelector вернёт пустоту, и вы потратите вечер на поиск «невидимой» ошибки. Сам так когда-то залип.

Проверка занимает минуту. Прокрутите страницу на 400 px, кнопка должна проявиться. Нажмите, и страница плавно уедет наверх. Если ничего не происходит, откройте консоль браузера (F12) и посмотрите, нет ли там красной ошибки.

Если хотите, чтобы кнопка выглядела прилично сразу, добавьте в CSS фон, скругление и cursor: pointer. Иначе получите прозрачный квадрат, который сложно найти.

Аудит кнопки на семь пунктов

Откройте свой сайт и ответьте «да» или «нет».

1. Страницы длиннее двух экранов?
2. Размер 40-50 px, а не размер рекламного щита?
3. Появляется после 300-500 px прокрутки, а не сразу?
4. Цвет вписан в дизайн и не кричит?
5. Прокрутка плавная, а не телепортация?
6. На мобильном кнопка не перекрывает контент?
7. Она одна на страницу? Несколько кнопок по разделам создают визуальный шум, и их начинают игнорировать.

Если «нет» набралось больше двух раз, пора открывать код.

Часто задаваемые вопросы

Нужна ли кнопка наверх на сайте?
Да, если страницы длиннее двух экранов, например блог, длинные статьи или каталог. Для коротких лендингов и визиток она не нужна.

Какой размер кнопки оптимален?
По моим замерам, 40-50 px. Некоторые источники называют 48-64 px, так что проверьте на своей аудитории и смотрите на случайные клики.

Как сделать плавную прокрутку вверх?
Либо добавьте в CSS scroll-behavior со значением smooth, либо вызывайте scrollTo с параметром behavior и тем же значением. Примеры в коде выше.

Нужна ли кнопка на мобильной версии?
На длинных страницах да, только меньше и ближе к краю. С бесконечной подгрузкой я чаще её убираю, хотя в UX-справочниках её считают полезной и там. Тут лучше протестировать самим.

Вместо итога

Кнопка наверх это не украшение, а инструмент. Хорошая незаметна, пока не понадобится, а плохая работает как назойливый продавец у входа. Самое смешное, что исправляется всё это десятком строк кода и двумя минутами здравого смысла.

А у вас на сайте кнопка есть? И если да, она тихий швейцар или сигнальная ракета? Расскажите в комментариях.

Об авторе. Макс Скриптов, персонаж блога СкриптоЛаб для развенчания мифов о сайтостроении. Материалы основаны на практическом опыте и данных, которые можно проверить. 💬 Делитесь своим опытом в комментариях!