X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2019-03-18
  • 4602 просмотр

    3 комментарий

  • Дизайн и разработка сайта

Доброго времени суток. 🙂

Хочу показать такую простенькую штуку, как кнопка возвращения назад. Довольно таки нужная штука в определенных случаях. Например у Вас есть страницы, куда попадает пользователь, по каким-то причинам. Рекламная страница или страница благодарности за что-то. Возможно даже такая кнопка стоит после статьи, и пользователь может вернутся обратно, после прочтения. В общем применений может быть масса. Многие скажут, что посетителю проще нажать кнопку "Назад" на своем браузере, но все же для некоторых именно такой способ будет более подходящим.

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

Осуществить такую кнопку можно двумя способами. Которые по сути одинаковые, просто используют разные html-элементы. Пример таких кнопок, можете посмотреть ниже:



Пример

Первая кнопка использует элемент input type="button" - это обычная кнопка. Можете настроить ее стилями присвоив класс и превратите в соответствующий элемент Вашего сайта, подходящий по стилю. далее задаем ему событие onclick в котором маленький скрипт - history.back();, который укажет браузеру посетителя, вернутся на один шаг назад, то есть на предыдущую ссылку, от куда был совершен переход. Готовый код выглядит следующим образом:

<input type="button" onclick="history.back();" value="Назад"/>

Вторая кнопка сделана с помощью обычной ссылки, которой зададим путь - href="#" . Ссылке тоже задаем событие onclick и тот же самый скрипт, но с небольшим дополнениемhistory.back();return false;.Как видите, добавили - return false. Данный код означает, что перехода к href="#" не будет. Готовый код будет таким:

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

Вот такие два простых способа, по сути один, с разными элементами. Теперь Вы сможете организовать у себя на сайте кнопку, которая будет возвращать посетителя назад.

На этом все, спасибо за внимание. 🙂

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

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 4, в среднем: 5 из 5
Читайте также
Опубликовано 3 комментария

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.