Кнопка назад html javascript

Window history.back()

The history.back() method loads the previous URL (page) in the history list.

The history.back() method only works if a previous page exists.

Note

history.back() is the same as history.go(-1) .

history.back() is the same as clicking «Back» your browser.

See Also:

Syntax

Parameters

Return Value

Browser Support

history.back() is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

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

Из этой статьи вы узнаете, как сделать специальную кнопку возврата назад на 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-hide < display: none!important; >#history-button

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

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

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

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

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

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

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

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

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

Оставьте комментарий

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

Для публикации кода в комментариях используйте следующие шорткоды —
[php]ваш код[/php] — для PHP, [css]ваш код[/css] — для CSS, [code lang=»js»]ваш код[/code] — для HTML или JS, указав соответствующий lang.

Из последнего

Как удалить часть шаблона в редакторе сайта WordPress

Если неиспользуемая часть шаблона в редакторе сайта WP не удаляется и появляется уведомление «Подходящий маршруту …

Как передать IP посетителей в Яндекс Метрику и Google Аналитику

Рассмотрим два варианта передачи IP посетителей сайта в Яндекс Метрику и Google Аналитику: через код …

Оптимизация сайта WP с плагином LiteSpeed и QUIC.cloud

Какие права доступа к файлам и папкам WordPress нужно установить и как исправить ошибку failed (13: Permission denied)

Как установить XAMPP и WordPress на домашний компьютер

Из этой пошаговой инструкции вы узнаете, как установить локальный веб-сервер XAMPP на операционную систему Windows, …

Источник

Кнопка назад на сайте

Как сделать кнопку назад на сайте? Самый простой вариант это с помощью JavaScript-функции history . С ней можно переходить вперед, назад, обновлять страницу и делать переход на две и более страницы сразу.

Кнопка назад

Функцию onclick=»history.back();» можно применять не только к ссылкам и кнопкам, но и к любому элементу, например к картинке или блоку:

Возвращение на несколько страниц назад

В скобках функции history.back можно указать количество страниц, которое необходимо для перехода. В примере ссылка возвращает пользователя на две страницы назад:

Подборка бесплатных IT-курсов и вебинаров от Skillbox.

Бесплатные IT-курсы, нужно только пройти онлайн-тест здесь

Обновить страницу

Перейти вперед

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:

Если мы используем JavaScript, то некоторые действия по умолчанию нужно отменить. Самый распространённый случай это клик по ссылке. К примеру при нажатии должно появляться всплывающее окно, но по умолчанию браузер будет переходить по URL. Если в атрибуте href указать знак Читать далее

MixItUp — это высокопроизводительная библиотека без зависимостей, для анимированных манипуляций с DOM, которая дает вам возможность фильтровать, сортировать, добавлять и удалять элементы DOM с красивой анимацией. MixItUp прекрасно сочетается с вашими существующими HTML и CSS, что делает её отличным выбором Читать далее

В этом уроке вы узнаете, как создать иллюзию трехмерной фотографии из изображения, используя JavaScript и библиотеку Pixi.js webGL. Давайте сделаем это! Концепция Чтобы превратить обычную фотографию в 3D, нам нужно использовать карту глубины (или некоторые назвали бы карту смещения или Читать далее

Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ — это определить Читать далее

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

jQuery — это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

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

Источник

PROИТ

Office 365, AD, Active Directory, Sharepoint, C#, Powershell. Технические статьи и заметки.

JavaScript: кнопка Назад (Back) в браузере

Зачастую необходимо сделать кнопку или ссылку, по нажатию на которую пользователь будет отправлен на предыдущую просмотренную страницу.

Далее приведу примеры, как сделать это при помощи JavaScript (JS).
1) кнопка «Назад»

  type="button" value=" <-- Назад " onclick="history.go(-1);return false;" />  

 href="#" onclick="history.back();return false;">Назад 

 href="#" onclick="history.go(-1);return false;">Назад 

 href="javascript:void(0);" onclick="history.back();">Назад 

 href="javascript:history.back();">Назад 

Это работает во всех браузерах, включая FireFox, Google Chrome и IE.

В случае с history.go(-1) можно экспериментировать. Например, если указать history.go(1) , то пользователь будет наоборот перенаправлен «Вперед» (Forward). Если history.go(-2) , то — назад на две страницы.

Если Вам понравилась статья, пожалуйста, поставьте лайк, сделайте репост или оставьте комментарий. Если у Вас есть какие-либо замечания, также пишите комментарии.

Источник