Как сделать переходы на сайте: ссылки, якоря и страницы

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

Карта выбора: какой переход вам нужен

Главный вопрос не в эффекте, а в цели. HTML стандарт определяет гиперссылку как переход к ресурсу, адрес которого указан в href; базовое поведение браузера уже включает открытие, копирование адреса и навигацию с клавиатуры. Это описано в HTML Living Standard.

• Другая страница или сайт: обычная ссылка <a href="/contacts/">.
• Раздел текущей страницы: якорная ссылка <a href="#prices"> и уникальный id у цели.
• Плавность или исчезновение блока: CSS-эффект поверх рабочей ссылки, а не отдельный способ навигации.
• Старый URL должен вести на новый: серверный редирект, а не пункт меню и не анимация.

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

Карта результата до изменения кода

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

Обычная ссылка между страницами

Для перехода на другую страницу используйте элемент a и реальный href. Кнопка <button> предназначена для действия в интерфейсе, например отправки формы или открытия панели, а не для замены адресной навигации. Больше вариантов внешних и относительных адресов есть в статье как сделать ссылку на страницу.

<nav aria-label="Основная навигация">
  <a href="/">Главная</a>
  <a href="/services/">Услуги</a>
  <a href="/contacts/">Контакты</a>
</nav>

Связанные ссылки удобно объединять в nav. Такая разметка помогает вспомогательным технологиям найти и пропустить блок навигации, что подтверждает техника W3C WAI. Текст ссылки должен объяснять цель сам по себе: «Условия доставки» полезнее, чем «Подробнее».

По теме: Как сделать cookies на сайте: безопасная схема в 2026

Якорь внутри одной страницы

Якорь нужен, когда целевой блок уже находится на этой странице. Значение после # должно совпасть с уникальным id. Браузер добавляет фрагмент в адрес, поэтому раздел можно открыть прямой ссылкой и сохранить в закладки.

<a href="#prices">Перейти к тарифам</a>

<section id="prices">
  <h2>Тарифы</h2>
  <p>Содержимое раздела.</p>
</section>

Для раздела на другой странице объедините путь и фрагмент: <a href="/services/#audit">Аудит сайта</a>. Не повторяйте один id у нескольких блоков. Если липкая шапка закрывает заголовок после перехода, добавьте цели scroll-margin-top, а не вычисляйте координаты вручную.

Подробная настройка кнопки наверх и поведения шапки уже есть в материале про прокрутку сайта. Здесь якорь нужен только как способ адресной навигации.

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

Плавность добавляется CSS-свойством scroll-behavior. Оно влияет на прокрутку, вызванную навигацией или API, но не меняет сам адрес и не создаёт ссылку. Браузер вправе игнорировать свойство, поэтому переход обязан оставаться понятным и без эффекта. Поведение зафиксировано в справке MDN.

html {
  scroll-behavior: smooth;
}

section {
  scroll-margin-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

Запрос пользователя на уменьшение движения нужно уважать. W3C рекомендует убирать необязательную анимацию, вызванную взаимодействием, или давать способ её отключить. Обоснование и техника prefers-reduced-motion описаны в руководстве W3C.

Анимация между состояниями

CSS transition или animation отвечает за появление, цвет и движение элементов. Она может сопровождать переход, но не должна скрывать момент загрузки и ломать кнопку назад. Сначала сделайте рабочую ссылку, затем добавьте короткий эффект к содержимому. Если нужен отдельный разбор производительности, используйте инструкцию как сделать CSS-анимацию.

• Не ставьте прозрачный слой поверх ссылок во время эффекта.
• Не задерживайте навигацию таймером ради красивого исчезновения страницы.
• Не анимируйте крупные блоки, если включён prefers-reduced-motion: reduce.
• Не полагайтесь на цвет: активный пункт меню отмечайте также текстом или aria-current="page".

По теме: Анализ сайта с помощью ИИ: проверка по данным в 2026

Редирект решает другую задачу

Редирект нужен, когда старый адрес удалён или временно недоступен. Для постоянного переноса Google рекомендует серверный 301 или 308, для временного используются 302, 303 или 307. JavaScript-перенаправление считается запасным вариантом, потому что рендеринг может не выполниться. Актуальная таблица приведена в документации Google Search Central.

Не ставьте редирект там, где пользователь должен сам выбрать страницу. Карта старых и новых URL, защита от циклов и проверка заголовка Location разобраны в отдельной статье как сделать редирект сайта.

Пошаговая проверка переходов

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

1. Составьте таблицу: текст элемента, исходная страница, целевой URL или id, ожидаемый результат.
2. Откройте каждую ссылку обычным кликом, в новой вкладке и после копирования адреса.
3. Пройдите меню клавишей Tab и активируйте ссылки Enter.
4. Отключите JavaScript и убедитесь, что обычные ссылки и якоря сохраняют базовое поведение.
5. Откройте URL с якорем напрямую и проверьте, что заголовок не скрыт липкой шапкой.
6. Включите системное уменьшение движения и убедитесь, что необязательная плавность пропала.
7. Для редиректа проверьте код ответа, Location, конечный URL и отсутствие цепочки переходов.

По теме: Как сделать горизонтальный сайт: прокрутка без ловушек

Диагностика частых сбоев

• Ссылка ведёт на 404. Проверьте начальный слэш, имя файла, регистр символов и фактический путь после публикации.
• Якорь ничего не делает. Сверьте href="#имя" с id="имя" и убедитесь, что id уникален.
• Клик работает только мышью. Замените кликабельный div на a или button по смыслу.
• После клика адрес не меняется. Проверьте, не перехватывает ли событие скрипт с preventDefault().
• Переход вызывает тошноту или рывок. Отключите необязательное движение и обработайте prefers-reduced-motion.
• Старый URL ходит по кругу. Остановите правило редиректа и сверяйте каждую пару источник-цель отдельно.

Частые вопросы

Чем ссылка отличается от кнопки?

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

Нужен ли JavaScript для перехода между страницами?

Для обычного сайта нет. a с href уже даёт рабочую навигацию. JavaScript добавляют только для поведения, которого нет в базовом HTML.

Как сделать плавный переход к блоку?

Создайте якорь, затем добавьте scroll-behavior: smooth и отключение эффекта через prefers-reduced-motion.

Можно ли сделать весь переход только анимацией?

Нет. Анимация не создаёт URL и не обеспечивает работу кнопки назад. Сначала нужна ссылка или корректный маршрут.

Когда нужен редирект?

Когда прежний URL должен автоматически открыть новый адрес. Для обычного пункта меню используйте ссылку.