Нет быстрого возврата к началу страницы

Критичность проблемы: Средняя | Сложность внедрения: Низкая | Встречаемость: Средняя

Открываю длинный каталог. Листаю, выбираю фильтры, дохожу до середины. Хочу сменить сортировку — она только вверху. Кнопки «вверх» нет. Скроллю пальцем. Долго, по сантиметру.

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

В блоге — лонгрид с таблицей. Ссылки на разделы в начале. Я внизу, надо вернуться к оглавлению. Листаю. По дороге ловлю липкий баннер, снова теряю фокус.

В личном кабинете страница с архивом документов. Тысяча строк. Фильтры сверху. Мне нужно поменять тип. Никакой кнопки «наверх», никакой «вернуться к фильтрам». Вручную. Каждый раз.

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

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

Я не бросаю страницу сразу. Я устаю от механики. Каждое действие — лишний жест. Накопится — и я ухожу.

Когда проблема критична, а когда нет

Критична:

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

Некритична:

• Короткие лендинги и страницы «экран–два».
• Приложения/сайты с плавающими фильтрами и дублирующими элементами внизу.
• Сценарии, где пользователь взаимодействует именно с текущим блоком, а не с шапкой.

Что об этом говорят пользователи

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

Бесполезные ответы

• Нормально всё, не задумываюсь.
• Я обычно как‑то пролистываю, не помню.
• Если надо — листаю, если нет — закрываю.
• У меня айфон, там своё.
• Я редко бываю внизу страницы.

Полезные ответы

• Смотрела отзывы в карточке товара на Android, чтобы вернуться к меню, свайпала секунд 10–15, устала и ушла на главную через вкладки браузера.
• Читал статью на ноутбуке, хотел перейти в поиск в шапке. Прокрутка заняла много времени из‑за врезок и баннеров, пару раз сбился и бросил.
• В каталоге листала 5–6 раз вниз, потом захотела поменять фильтр. Не нашла способ быстро наверх, листала долго и забыла, что хотела менять.
• На iPhone случайно тапнула по ссылке внизу, вернулась, прогрузились новые карточки, верх уехал дальше — не стала подниматься.
• В блоге дочитал лонгрид, хотел открыть раздел «Маркетинг» в меню наверху. Прокрутка утомила, открыл поиск в браузере и нашёл другой сайт.

Решение проблемы

• Покажите кнопку «Наверх» только когда пользователь прокрутил вниз хотя бы на один экран. До этого её не видно, чтобы не мешать.
• Разместите кнопку справа снизу, отступ 16–24 px от краёв. Не перекрывайте чат‑виджеты и плавающие CTA. На маленьких экранах поднимайте кнопку выше фиксированных элементов.
• Минимальный размер тач‑таргета — 44×44 px. Круглая форма, стрелка вверх, контраст не ниже 4.5:1. Состояния: обычное, наведение, нажатие, фокус.
• Поддержите доступность: role=button, aria-label="Наверх", фокус‑контур, активация клавишей Enter/Space. На prefers-reduced-motion отключайте анимацию.
• Прокрутка плавная, быстрая, без укачивания: 300–600 мс для 2–3 экранов, для очень длинных страниц — ускоряйте, либо делайте резкий переход при отключённой анимации.
• Не закрывайте контент: скрывайте кнопку, когда на экране виден футер, и показывайте снова, как только футер скрыт.
• Дублируйте возможность внизу: текстовая ссылка «К началу» в футере. Это помогает, если плавающие элементы заблокированы.
• Работайте на всех устройствах: мобильные, планшеты, десктопы. Не полагайтесь на жесты системы — многие о них не знают.
• Покройте аналитикой: события показа и клика, глубина скролла, время восстановления контекста навигации. Смотрите на отказ после глубокого скролла.
• Протестируйте: разные экраны, ландшафт/портрет, масштаб 200%, клавиатура, скринридер, RTL. Проверьте, что кнопка не конфликтует с корзиной, чатом и куки‑баннером.
• Сделайте код лёгким: иконка SVG, без тяжёлых библиотек, инициализация после интерактивности страницы.

Гипотезы для роста конверсии

• Если добавить плавающую кнопку «Наверх» после прокрутки на один экран, то конверсия в переходы по верхнему меню может увеличиться за счёт того, что пользователи быстрее возвращаются к навигации.
• Если показывать кнопку «Наверх» на карточке товара после блока отзывов, то конверсия в «Добавить в корзину» может увеличиться за счёт снижения трения при возврате к кнопке покупки.
• Если добавить текстовую ссылку «К началу» в футере, то конверсия в повторный поиск может увеличиться за счёт явной подсказки пути наверх для осторожных пользователей.
• Если поднять кнопку над плавающим чатом и CTA на мобильных, то конверсия в фильтрацию каталога может увеличиться за счёт того, что элемент становится доступным и не перекрыт.
• Если включать кнопку только на страницах глубже двух экранов, то конверсия в целевые переходы может увеличиться за счёт отсутствия визуального мусора на коротких страницах.

Последствия — не только раздражение. Пользователь реже повторяет поиск, реже меняет фильтры, реже переходит в соседние разделы. Он исчерпал внимание к моменту, когда нужно сделать следующее действие, и уезжает к конкуренту.