Когда кнопка действительно полезна

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

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

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

Минимальный пример HTML

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

<main id="page-top">
  <h1>Название страницы</h1>
  <!-- Содержимое страницы -->
</main>
<a class="back-to-top" href="#page-top">Наверх ↑</a>

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

В этом варианте действие работает без JavaScript. Сначала убедитесь в базовой работоспособности, затем добавляйте оформление и эффекты.

Оформление и размещение

Ниже приведён простой фиксированный вариант. Размеры и цвета адаптируйте к своему интерфейсу, сохраняя читаемость. Не используйте чрезмерный z-index: он может поднять кнопку над диалогом или перекрыть системные элементы сайта.

.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  padding: .8rem 1rem;
  color: #fff;
  background: #263b25;
  border-radius: .5rem;
}
.back-to-top:focus-visible {
  outline: 3px solid #739c50;
  outline-offset: 3px;
}

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

Плавная прокрутка без обязательной анимации

Плавность можно добавить через CSS. Но учитывайте системную настройку уменьшения движения: для части пользователей длинная анимированная прокрутка неудобна. Базовый переход должен оставаться понятным и без эффекта.

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

Поведение свойства описано в документации MDN. Браузер может обрабатывать прокрутку с учётом собственной реализации. Не делайте выполнение основной задачи зависимым от точной длительности анимации.

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

Как добавить в CMS

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

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

Не подключайте большую библиотеку только ради этого перехода. Если нужна кнопка, которая появляется после прокрутки, добавляйте такое поведение отдельно и сохраняйте разумный вариант без скрипта. Устаревший пример jQuery не является обязательным условием.

Чек-лист проверки

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

Проверьте страницу при увеличенном масштабе, на узком экране и с включённым уменьшением движения. Убедитесь, что подпись не обрезается и кнопка не закрывает текст или элементы формы. Если используются только стрелки, добавьте доступное название.

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