Html сделать кнопку назад

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

Из этой статьи вы узнаете, как сделать специальную кнопку возврата назад на 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, …

Источник

Как сделать — Кнопки вперед и назад

Узнайте, как создать кнопки «вперед» и «назад» с помощью CSS.

Кнопки вперед и назад

Создать кнопки вперед и назад

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

a <
text-decoration: none;
display: inline-block;
padding: 8px 16px;
>

a:hover background-color: #ddd;
color: black;
>

.previous background-color: #f1f1f1;
color: black;
>

.next background-color: #4CAF50;
color: white;
>

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

How to create an HTML back button

You can add a back button to your web page. When a visitor to your page clicks the button, they’re taken to the last page they visited, as if they clicked the back button in their browser.

You can accomplish this by editing the HTML (hypertext markup language) of your page, and adding a little JavaScript.

These buttons don’t work if the user has no browsing history. For example, if the user opens your page in a new browser tab or window, nothing happens when they click the button.

Using history.back

In a web browser, the built-in JavaScript object window has an object called history containing the URLs a user has visited in their current browser window. You can use the history.back() method to tell the browser to go back to the user’s previous page.

One way to use this JavaScript is to add it to the onclick event attribute of a button. Here, we create the button using a element, containing an element of the button type.

Insert the following HTML into your web page:

The result looks like the button below. If you click it, you go back to the previous page in your history.

Using history.go

The history.go() method tells the browser to go to a specific page in the user’s browsing history. You can specify which history item by putting a number inside the parentheses. With computer programming, this is called an argument.

If you specify the number -1 as your argument, the browser goes back one page in the browser’s history. Here’s the same code as above, using history.go(-1) instead of history.back().

Related information

• How to create an HTML push-button link.
• See our back and push-button definitions for further information and related links.
• See our and HTML element definitions for more examples of them in use.
• HTML and web design help and support.

Источник

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

Как сделать кнопку назад на сайте? Самый простой вариант это с помощью 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 облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

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

Источник