Как сделать кнопку назад в html

Кнопка возврата востребована на посадочных страницах, многошаговых формах и внутренних разделах сайтов. Она снижает количество отказов и облегчает перемещение по страницам без перезагрузки контента.

В HTML нет готового тега для кнопки Назад. Реализация строится на сочетании разметки и JavaScript. Наиболее распространённый способ – вызвать метод history.back(), который обращается к стеку переходов браузера. Скрипт занимает одну строку, но перед использованием полезно проверить, существует ли предыдущая страница, иначе кнопка может привести пользователя на стартовый экран браузера.

Альтернативный приём – использовать history.go(-1), который позволяет управлять количеством шагов назад, например на два клика. Для пользовательских сценариев с динамическими страницами иногда требуется передавать URL вручную через GET-параметр: это гарантирует возврат к нужной точке, даже если история недоступна из-за настроек безопасности.

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

Кнопка Назад через history.back() на JavaScript

Метод history.back() вызывает переход к предыдущей странице в стеке браузера. Скрипт срабатывает мгновенно и не требует дополнительных настроек.

Простой пример кнопки:

• Назад

Особенности применения:

1. history.back() работает только если в истории есть предыдущая запись. При открытии страницы с новой вкладки действие не выполнится.

2. Метод не принимает аргументов, поэтому он безопаснее, чем прямое указание URL.

3. Подходит для внутренних страниц сайта, где важны быстрые возвраты.

Рекомендации по использованию:

• Проверять наличие предыдущей истории через history.length.

• Для SPA-сайтов сочетать с роутером, чтобы избежать конфликтов.

• Добавлять альтернативный переход на нужный URL при отсутствии history.

Пример с проверкой history.length:

• Назад

  Возврат работает только при наличии предыдущей записи в стеке. При прямом заходе по URL событие не приведёт к перемещению. Для таких случаев полезно добавить проверку.

  Пример с fallback на главную:

  ?>
  

  Особенности метода:

  1. Referer может быть скрыт настройками браузера или политиками приватности.

  2. Полагаться на Referer можно только для внутренних переходов в пределах домена.

  3. Для внешних ссылок стоит предусмотреть альтернативный маршрут.

  Рекомендации:

  • Фильтровать данные Referer, чтобы предотвратить внедрение стороннего кода.

  • Использовать строгую проверку домена, если возврат ограничивается внутренними разделами.

  • Сохранять fallback-адрес на случай отсутствия заголовка.

  Передача адреса для возврата через параметр URL

  

  Передача адреса через URL позволяет создавать кнопки «Назад» без использования JavaScript и без полагания на заголовок Referer. Адрес предыдущей страницы указывается в параметре, например, ?back=/previous-page.

  Пример ссылки с параметром:

  Назад

  На странице назначения можно считать параметр и подставить его в ссылку для возврата:

  
$back = $_GET['back'] ?? '/';
echo '<a href="' . htmlspecialchars($back) . '">Назад</a>';
?>


  Рекомендации по использованию:

  • Задавать fallback-адрес, если параметр отсутствует или некорректен.

  • Ограничивать допустимые домены или разделы для предотвращения перехода на внешние сайты.

  • Для динамических страниц передавать полный путь, включая query-параметры, чтобы вернуть пользователя в точное состояние.

  Метод подходит для многошаговых форм и страниц с редиректами, где важен точный контроль возврата.

  Кнопка Назад с проверкой наличия истории переходов

  

  Метод history.back() срабатывает только при наличии предыдущей записи в истории браузера. Если пользователь открыл страницу напрямую, переход не произойдёт. Для корректной работы полезно проверять history.length.

  Пример кнопки с проверкой:

  Назад

  Особенности реализации:

  • history.length возвращает количество записей в стеке текущего окна. Значение 1 означает отсутствие предыдущей страницы.

  • Fallback-URL обеспечивает возврат на заданную страницу, если истории нет.

  • Метод подходит для страниц с внутренней навигацией и многошаговыми процессами.

  Рекомендации по использованию:

  • Использовать простые URL для fallback, чтобы избежать циклических редиректов.

  • На SPA-сайтах сочетать с роутером для сохранения логики переходов.

  • Тестировать поведение кнопки при разных сценариях: прямой вход, возврат с другой страницы, открытие в новой вкладке.

  Отключение кнопки при отсутствии предыдущей страницы

  

  Для предотвращения ошибок перехода полезно отключать кнопку «Назад», если в истории браузера нет предыдущей страницы. Это повышает удобство и предотвращает пустые переходы.

  Пример кнопки с проверкой и отключением:

  Назад

  Особенности реализации:

  • history.length проверяет наличие записей в стеке переходов. Значение 1 или меньше означает отсутствие предыдущей страницы.

  • disabled предотвращает клики и визуально сигнализирует пользователю о недоступности кнопки.

  • Метод совместим с любыми внутренними страницами сайта и прост в интеграции.

  Рекомендации:

  • Для SPA учитывать маршрутизацию, чтобы не блокировать рабочие переходы внутри приложения.

  • Можно добавить альтернативный URL для fallback, если кнопка отключена.

  • Тестировать на разных браузерах, так как политика history.length может отличаться при прямом открытии страницы.

  Возврат на нужный уровень истории по history.go()

  

  Метод history.go(n) позволяет перемещаться по истории браузера на указанное количество шагов. Отрицательное значение n возвращает назад, положительное – вперёд.

  Пример возврата на два шага назад:

  Назад на два шага

  Особенности применения:

  • Если в истории недостаточно шагов, переход выполнен не будет.

  • Метод работает аналогично history.back() для n = -1 и history.forward() для n = 1.

  • Подходит для многошаговых процессов, когда необходимо вернуться на определённый этап.

  Рекомендации:

  • Перед использованием проверять history.length, чтобы избежать ошибок при недостатке записей.

  • Для SPA и динамических страниц комбинировать с роутером, чтобы состояние приложения соответствовало истории.

  • Использовать отрицательные значения для возврата назад и положительные для перехода вперёд.

  • При необходимости добавить fallback на конкретный URL, если нужный уровень истории недоступен.

  Создание универсального компонента кнопки Назад для сайта

  Универсальная кнопка «Назад» сочетает проверку истории, fallback-URL и безопасное отображение. Такой компонент можно использовать на всех страницах сайта без дублирования кода.

  Пример структуры кнопки с использованием history.back() и fallback:

  Элемент	Описание
  Кнопка	<button id="backButton">Назад</button> – основной элемент для клика
  Проверка истории	Скрипт проверяет history.length > 1 перед возвратом
  Fallback	Если истории нет, кнопка перенаправляет на указанный URL, например '/'
  Безопасность	Использование addEventListener вместо inline onclick для предотвращения конфликтов

  Пример реализации:

  Назад

  Рекомендации по применению:

  • Компонент можно включить через include или template для повторного использования.

  • Для SPA интегрировать с роутером, чтобы корректно возвращались внутренние состояния.

  • Визуально сигнализировать о недоступности кнопки через атрибут disabled или стили.

  • Тестировать на разных браузерах и сценариях прямого захода, переходов и редиректов.

  Вопрос-ответ:

  Как создать простую кнопку «Назад» на HTML с помощью JavaScript?

  Самый простой способ — использовать метод history.back(). Для этого добавляется кнопка с атрибутом onclick: <button onclick="history.back()">Назад</button>. При клике браузер вернёт пользователя на предыдущую страницу в истории. Если истории нет, переход не произойдёт.

  Можно ли сделать кнопку «Назад» без использования JavaScript?

  Да, это возможно через серверный заголовок Referer или передачу адреса в URL. Например, на PHP можно считать Referer и подставить его в ссылку: <a href="">Назад</a>. Такой подход работает, когда предыдущий адрес известен на сервере.

  Как сделать кнопку, которая отключается при отсутствии предыдущей страницы?

  Используется проверка history.length. Если записей меньше двух, кнопка блокируется с помощью атрибута disabled. Пример: if(history.length <= 1) { btn.disabled = true; } else { btn.addEventListener('click', () => history.back()); }. Это предотвращает клики, которые никуда не ведут.

  Можно ли вернуться на несколько шагов назад с помощью кнопки?

  Да, для этого используется метод history.go(n). Например, history.go(-2) вернёт пользователя на два шага назад. Для одного шага назад можно использовать history.back(), а для одного шага вперёд — history.forward(). Перед вызовом рекомендуется проверять history.length.

  Как создать универсальную кнопку «Назад» для всего сайта?

  Универсальный компонент сочетает проверку истории, fallback-URL и безопасное событие клика. Кнопка создаётся один раз и вставляется на все страницы. Пример реализации: const btn = document.getElementById('backButton'); if(history.length > 1){ btn.addEventListener('click', () => history.back()); } else { btn.addEventListener('click', () => window.location.href='/'); btn.disabled = true; }. Такой подход работает для внутренних страниц и многошаговых процессов.