Кнопка «Наверх» на длинных страницах: удобство без конфликта с чатом

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

Зачем вообще нужна кнопка «Наверх»

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

Особенно полезна она на страницах с большим объёмом текста и каталогах. Длинные статьи, прайсы, страницы с галереями, каталоги с подгрузкой — везде, где прокрутка занимает заметное время. Для коротких страниц, например контактов или благодарности, кнопка не нужна: она создаёт шум и отвлекает.

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

Когда кнопка не нужна или даже вредна

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

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

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

Где разместить кнопку

Стандартное место — правый нижний угол, но именно оно чаще всего занято чатом или кнопками связи. Поэтому нужно сначала составить схему угла экрана: какие элементы там уже живут. Если справа внизу находится виджет чата или кнопка мессенджера, «Наверх» стоит поднять выше или сместить влево. Проверьте оба направления и выберите вариант, где ничего не накладывается.

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

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

Конфликт с чатом, мессенджерами и кнопкой звонка

Главная проблема большинства сайтов — угол экрана, занятый сразу несколькими плавающими элементами. Чат Живосайт или Энвибокс, кнопки Телеграма и Макса, заказ обратного звонка, виджет карты, уведомление о куки — всё это борется за одно и то же место. Если добавить сюда ещё кнопку «Наверх», на телефоне остаётся мало свободного пространства, и пользователь случайно нажимает не туда.

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

Хороший приём — поднимать «Наверх» над блоком связи и показывать её только при глубокой прокрутке. Другой вариант — объединить элементы в одно меню: одна кнопка с раскрытием, внутри которой телефон, мессенджеры и возврат наверх. Но такое решение требует аккуратности: чем глубже спрятана кнопка звонка, тем меньше звонков вы получите. Проверьте, не упало ли число обращений после объединения.

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

Особенности телефона: большой палец, панели браузера, клавиатура

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

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

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

Как это связано с продвижением «3 в 1»

Кнопка «Наверх» кажется далёкой от продвижения, но она касается удобства, а значит, и числа заявок. В подходе «3 в 1» обращения приходят из трёх каналов: из поиска, из Яндекс Бизнеса с Картами и из 2ГИС. Все три ведут людей на сайт или к звонку, и чем удобнее сайт, тем выше доля тех, кто доходит до заявки.

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

Второй канал — Яндекс Бизнес и Яндекс Карты. Из карточки люди попадают на сайт по ссылке и чаще всего с телефона. Они хотят быстро найти адрес, цену, режим работы, телефон. Если на мобильной версии кнопки конфликтуют и закрывают друг друга, человек не позвонит. Третий канал — 2ГИС, где аудитория ещё чаще смотрит с телефона и в движении. Для неё важны крупные, ничем не перекрытые кнопки звонка и построения маршрута.

Результат нужно считать так же, как и для других каналов. Отдельные номера и метки для сайта, Яндекс Карт и 2ГИС помогают понять, откуда пришли звонки. Обращения с карт стоит учитывать наравне с формами сайта. Если после правки плавающих кнопок число звонков с мобильных устройств выросло, правка принесла пользу.

Как мерить влияние кнопки на заявки

Любое изменение интерфейса нужно проверять. Начните с простого: настройте в Яндекс.Метрике цель на нажатие кнопки «Наверх». Через две-три недели вы увидите, как часто ею пользуются и на каких страницах. Если нажатий почти нет, значит, она не нужна, или стоит не там. Если нажимают много, посмотрите, что делает человек после этого: открывает меню, звонит, заполняет форму.

Далее сравните показатели до и после добавления или перемещения кнопки. Следите за числом кликов по телефону, отправок форм, обращений в мессенджеры, в первую очередь с мобильных устройств. Вебвизор в Яндекс.Метрике покажет, не промахиваются ли люди и не накрывает ли кнопка контент. Обращайте внимание на случаи, когда посетитель дважды нажимает рядом с нужной кнопкой.

Хорошо работает проверка на двух вариантах: на одной группе посетителей кнопка есть, на другой нет. Если у вас мало трафика, меняйте по очереди и сравнивайте периоды с учётом сезона. Не меняйте одновременно расположение чата, форму и кнопку «Наверх», иначе вы не поймёте, что повлияло. Фиксируйте даты изменений и итоги.

Как реализовать кнопку технически и не навредить скорости

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

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

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

Типичные ошибки

Первая ошибка — кнопка, которая видна сразу при открытии страницы, когда прокручивать ещё нечего. Она выглядит странно и отвлекает. Вторая — слишком яркий цвет и большой размер: кнопка конкурирует с главным призывом. Третья — перекрытие чата и мессенджеров, о котором мы говорили. Четвёртая — перекрытие текста и цен на телефоне.

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

Отдельная ошибка — использовать «Наверх» как замену хорошей навигации. Если страница настолько длинная и запутанная, что без возврата наверх не обойтись, возможно, её нужно разделить, добавить оглавление или закрепить меню. Кнопка лечит симптом, а не причину.

Что делать на страницах заявок, каталогах и статьях

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

В каталогах с подгрузкой кнопка особенно полезна: после нескольких экранов товаров вернуться к фильтрам и сортировке удобно одним касанием. Здесь она должна возвращать к блоку фильтров, а не обязательно к самому верху страницы. Такое решение требует небольшой настройки, но заметно улучшает удобство.

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

Как сочетать кнопку с закреплённой шапкой и нижней панелью

Многие современные сайты используют закреплённую шапку, которая остаётся видимой при прокрутке, либо нижнюю панель с кнопками на телефоне: позвонить, написать, построить маршрут. Если такая панель есть, кнопка «Наверх» может оказаться лишней или должна жить выше панели. Если шапка закреплена, возврат наверх уже не критичен, так как меню всегда под рукой.

Нижняя панель на телефоне — удобный способ собрать все каналы обращений в одном месте. В ней могут находиться кнопки звонка, мессенджеров, маршрута к вашему адресу из Яндекс Карт или 2ГИС. Тогда отдельные плавающие кнопки в углу не нужны, и «Наверх» легко вписывается в общую логику: она либо входит в панель, либо появляется чуть выше её.

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

Вывод: небольшая деталь, которая не должна мешать заявкам

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

Если вы не уверены, как у вас сейчас расположены кнопки связи и не мешают ли они друг другу, обратитесь за бесплатной консультацией к специалистам компании «Сайты Профессионально». Мы посмотрим мобильную версию сайта, проверим работу чата и мессенджеров, сверим карточки в Яндекс Бизнесе и 2ГИС и подскажем, как по схеме «3 в 1» собрать все обращения в понятную систему учёта.