Кнопка возврата назад
Хочу показать такую простенькую штуку, как кнопка возвращения назад. Довольно таки нужная штука в определенных случаях. Например у Вас есть страницы, куда попадает пользователь, по каким-то причинам. Рекламная страница или страница благодарности за что-то. Возможно даже такая кнопка стоит после статьи, и пользователь может вернутся обратно, после прочтения. В общем применений может быть масса. Многие скажут, что посетителю проще нажать кнопку «Назад» на своем браузере, но все же для некоторых именно такой способ будет более подходящим.
Осуществить такую кнопку можно двумя способами. Которые по сути одинаковые, просто используют разные html-элементы. Пример таких кнопок, можете посмотреть ниже:
Первая кнопка использует элемент input type=»button» — это обычная кнопка. Можете настроить ее стилями присвоив класс и превратите в соответствующий элемент Вашего сайта, подходящий по стилю. далее задаем ему событие onclick в котором маленький скрипт — history.back();, который укажет браузеру посетителя, вернутся на один шаг назад, то есть на предыдущую ссылку, от куда был совершен переход. Готовый код выглядит следующим образом:
Вторая кнопка сделана с помощью обычной ссылки, которой зададим путь — href=»#» . Ссылке тоже задаем событие onclick и тот же самый скрипт, но с небольшим дополнениемhistory.back();return false;.Как видите, добавили — return false. Данный код означает, что перехода к href=»#» не будет. Готовый код будет таким:
Вот такие два простых способа, по сути один, с разными элементами. Теперь Вы сможете организовать у себя на сайте кнопку, которая будет возвращать посетителя назад.
На этом все, спасибо за внимание. ��
Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты 🙂
Кнопка “вернуться назад”.
Часто в нашей жизни поcле неудачного случая мы ищем кнопку назад, чтобы вернуться к исходному месту. Может, я и сильно загнул со вступлением, но если в жизни и нет такой кнопочки, зато ее можно реализовать на сайте. Кнопка «вернуться назад» поможет посетителю вернуться к исходному месту, туда, откуда он начинал. Код написан на обычном javascript, вставляется в тело веб-сайта <body></body>
Кнопка вернуться назад на javascript
1. Итак, приступим. Откройте html код документа и в самом теле <body></body> пишем код javascript.
А вот и полностью готовая html страница с кнопкой «вернуться назад».
2. Если хотите прописать функцию «назад» в виде картинки (это может быть картинка с красивой кнопкой), тогда используйте следующий код. img.png — это ваша картинка (png, jpg, gif, bmp и др.).
Вот полностью готовая html страница с картинкой «вернуться назад».
Вот и все. Можете смело использовать кнопку «вернуться назад» на сайте, это очень удобно, особенно, если на одной странице много информации. Если вы знаете другие методы установки кнопки «назад», пишите в комментариях.
Как сделать кнопку «Вернуться назад» и скрыть её если нет истории переходов
от Наталья Мамбетова 08.10.2021 Обновлено 02.04.2022
Из этой статьи вы узнаете, как сделать специальную кнопку возврата назад на JS или PHP, чтобы помочь заблудившимся посетителям попасть на предыдущую страницу. А также, как скрыть эту кнопку, если в браузере посетителя отсутствует история переходов по сайту.
Способы создания кнопки «назад» на JavaScript
Чтобы при нажатии кнопки заставить браузер переместиться на одну страницу назад, воспользуемся JavaScript методом history.back() . Объект history отвечает за историю переходов, которые пользователь совершил в переделах одной вкладки браузера. Эти переходы браузер сохраняет в сессию текущего окна. Если предыдущая страница отсутствует, данный вызов метода не делает ничего.
Способ 1
Самый простой способ сделать кнопку «назад» — прописать событие onclick wp-block-syntaxhighlighter-code «>
Способ 2
Несмотря на удобство 1 способа всё же правильнее будет настроить события из кода JavaScript методом addEventListener.
Скопируйте этот скрипт и вставьте его на нужную страницу.
В том месте, где требуется установить кнопку, добавьте HTML код:
Как скрыть кнопку «Вернуться назад» при прямом посещении
Если посетитель сделает прямой переход к странице содержащей кнопку «назад» и воспользуется этой кнопкой, то ничего не произойдёт, так как переходить будет некуда, либо его вернёт обратно на пустую вкладку. Поэтому логичнее будет эту кнопку скрыть.
Для этого будем использовать свойство history.length которое возвращает количество переходов (шагов) вперёд или назад, выполняемых в пределах текущей вкладки или окна.
Рассмотрим несколько возможностей history.length и поведение пользователя:
- Пользователь посещает страницу с новой вкладки браузера, тогда history.length = 2 . Если он кликнет по кнопке «назад», то перейдет на пустую вкладку.
- Пользователь открывает страницу на новой вкладке или окне, кликая по ссылке, тогда history.length = 1 . В этом случае возвращаться будет некуда, т.к. это новая сессия.
- Пользователь переходит на страницу после посещения нескольких страниц, в этом случае history.length > 2 и теперь мы можем ему показать кнопку «назад». В скрипте применим этот вариант.
Добавим кнопке класс, чтобы скрыть её при прямом заходе с помощью CSS, а когда посетитель выполнит переход с предыдущей страницы — удалим указанный класс методом classList.remove .
Скопируйте скрипт и вставьте на странице, где будет установлена кнопка. Если используете WordPress, то скрипт можно разместить в блоке «Произвольный HTML» редактора Гутенберг.
HTML код кнопки будет таким:
Ещё свойства объекта history, которые можно использовать для создания кнопок вперёд/назад:
- history.go(n) — свойство, позволяющее перемещаться по истории. В качестве аргумента передается смещение, относительно текущей позиции. Например, history.go(-2) вернёт вас на две страницы назад. Данный метод сработает только если страница, на которую нужно вернуться, существует в журнале;
- history.forward() — идентично вызову history.go(-1) , т.е. загружает следующую страницу, если она есть в истории. Можно использовать вместе с history.back() .
Кнопка возврата назад на PHP
Данный способ подходит для сайтов на PHP, в том числе и для WordPress. Установите этот код в файл с расширением .php в том месте, где требуется вывести кнопку:
В данном случае реферер, т.е. URL источника запроса, будет всегда пуст если страница загружается не по ссылке, а путем ввода URL-адреса в адресную строку, соответственно, кнопка не отобразится. Она появится когда реферер будет содержать адрес предыдущей страницы.
Кнопка перехода «Назад» с дочерних страниц на родительскую для WordPress
Если стоит задача установить на дочерних страницах кнопку «вернуться назад» с URL-адресом родительской страницы, скопируйте и вставьте в файл page.php этот код:
Где использовать кнопку «назад»
Кнопка «вернуться назад» особенно часто используют пользователи мобильных приложений и сайтов. Её можно добавить на промежуточные и дочерние страницы, на те страницы где отсутствует постраничная навигация и нет блоков с анонсами статей или карточек товаров.