Как сделать кнопку «Вернуться назад» и скрыть её если нет истории переходов

Из этой статьи вы узнаете, как сделать специальную кнопку возврата назад на JS или PHP, чтобы помочь заблудившимся посетителям попасть на предыдущую страницу. А также, как скрыть эту кнопку, если в браузере посетителя отсутствует история переходов по сайту.

Способы создания кнопки «назад» на JavaScript

Чтобы при нажатии кнопки заставить браузер переместиться на одну страницу назад, воспользуемся JavaScript методом history.back(). Объект history отвечает за историю переходов, которые пользователь совершил в переделах одной вкладки браузера. Эти переходы браузер сохраняет в сессию текущего окна. Если предыдущая страница отсутствует, данный вызов метода не делает ничего.

Способ 1

Самый простой способ сделать кнопку «назад» — прописать событие onclick="history.back(); непосредственно в HTML теге. Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы.

Скопируйте этот код, вставьте в любом месте своей страницы и протестируйте. Если такой вариант вам подходит, добавьте немного CSS и используйте где угодно.

<a href="#" onclick="history.back();return false;" class="history-back">Вернуться назад</a>

Способ 2

Несмотря на удобство 1 способа всё же правильнее будет настроить события из кода JavaScript методом addEventListener.

Скопируйте этот скрипт и вставьте его на нужную страницу.

<script>
	document.getElementById('history-button').addEventListener('click', () => {
	  history.back();
	});
</script>

В том месте, где требуется установить кнопку, добавьте HTML код:

<button id="history-button">Вернуться назад</button>

Как скрыть кнопку «Вернуться назад» при прямом посещении

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

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

Рассмотрим несколько возможностей history.length и поведение пользователя:

• Пользователь посещает страницу с новой вкладки браузера, тогда history.length = 2. Если он кликнет по кнопке «назад», то перейдет на пустую вкладку.
• Пользователь открывает страницу на новой вкладке или окне, кликая по ссылке, тогда history.length = 1. В этом случае возвращаться будет некуда, т.к. это новая сессия.
• Пользователь переходит на страницу после посещения нескольких страниц, в этом случае history.length > 2 и теперь мы можем ему показать кнопку «назад». В скрипте применим этот вариант.

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

Скопируйте скрипт и вставьте на странице, где будет установлена кнопка. Если используете WordPress, то скрипт можно разместить в блоке «Произвольный HTML» редактора Гутенберг.

<script>
	window.addEventListener("load", function() {
		let elem = document.querySelector('#history-button');
		if (window.history.length > 2) {
			elem.addEventListener('click', () => {
				history.back();
			})
			
			elem.classList.remove("history-hide");
		}
	});
</script>

HTML код кнопки будет таким:

<button id="history-button" class="history-hide">Вернуться назад</button>

Стили кнопки:

.history-hide {
	display: none!important;
}
#history-button {
	background: #61a229;
	border-radius: 4px;
	color: #fff;
	font-size: 13px;
	padding: .5em 1em;
	display: inline-block;
	line-height: 1.2;
	margin-bottom: 30px;
	cursor: pointer;
	border: 1px solid #ccc;
}

Ещё свойства объекта history, которые можно использовать для создания кнопок вперёд/назад:

• history.go(n) — свойство, позволяющее перемещаться по истории. В качестве аргумента передается смещение, относительно текущей позиции. Например, history.go(-2) вернёт вас на две страницы назад. Данный метод сработает только если страница, на которую нужно вернуться, существует в журнале;
• history.forward() — идентично вызову history.go(-1), т.е. загружает следующую страницу, если она есть в истории. Можно использовать вместе с history.back().

Кнопка возврата назад на PHP

Данный способ подходит для сайтов на PHP, в том числе и для WordPress. Установите этот код в файл с расширением .php в том месте, где требуется вывести кнопку:

<?php
	if(isset($_SERVER['HTTP_REFERER'])) {
		$urlback = htmlspecialchars($_SERVER['HTTP_REFERER']);
		echo "<a href='$urlback' class='history-back'>Вернуться назад</a>"; 
  }
?>

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

Кнопка перехода «Назад» с дочерних страниц на родительскую для WordPress

Если стоит задача установить на дочерних страницах кнопку «вернуться назад» с URL-адресом родительской страницы, скопируйте и вставьте в файл page.php этот код:

<?php
    $parentUrl = get_permalink($post->post_parent);
    $parent_title = get_the_title($post->post_parent);
    $current_post = get_the_title();
    if ($parent_title == $current_post) { $parentUrl = '/'; };
?>
<?php //Проверяем, является ли страница родительской или дочерней
	if (wp_get_post_parent_id(get_the_ID())) {
		echo "<a href='$parentUrl' class='history-back'>Вернуться назад</a>";
	}
?>

Где использовать кнопку «назад»

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