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 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 <form> element, containing an <input> 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.
Кнопка “вернуться назад”.
Часто в нашей жизни поcле неудачного случая мы ищем кнопку назад, чтобы вернуться к исходному месту. Может, я и сильно загнул со вступлением, но если в жизни и нет такой кнопочки, зато ее можно реализовать на сайте. Кнопка «вернуться назад» поможет посетителю вернуться к исходному месту, туда, откуда он начинал. Код написан на обычном javascript, вставляется в тело веб-сайта <body></body>
Кнопка вернуться назад на javascript
1. Итак, приступим. Откройте html код документа и в самом теле <body></body> пишем код javascript.
А вот и полностью готовая html страница с кнопкой «вернуться назад».
2. Если хотите прописать функцию «назад» в виде картинки (это может быть картинка с красивой кнопкой), тогда используйте следующий код. img.png — это ваша картинка (png, jpg, gif, bmp и др.).
Вот полностью готовая html страница с картинкой «вернуться назад».
Вот и все. Можете смело использовать кнопку «вернуться назад» на сайте, это очень удобно, особенно, если на одной странице много информации. Если вы знаете другие методы установки кнопки «назад», пишите в комментариях.
Кнопка возврата назад
Хочу показать такую простенькую штуку, как кнопка возвращения назад. Довольно таки нужная штука в определенных случаях. Например у Вас есть страницы, куда попадает пользователь, по каким-то причинам. Рекламная страница или страница благодарности за что-то. Возможно даже такая кнопка стоит после статьи, и пользователь может вернутся обратно, после прочтения. В общем применений может быть масса. Многие скажут, что посетителю проще нажать кнопку «Назад» на своем браузере, но все же для некоторых именно такой способ будет более подходящим.
Осуществить такую кнопку можно двумя способами. Которые по сути одинаковые, просто используют разные html-элементы. Пример таких кнопок, можете посмотреть ниже:
Первая кнопка использует элемент input type=»button» — это обычная кнопка. Можете настроить ее стилями присвоив класс и превратите в соответствующий элемент Вашего сайта, подходящий по стилю. далее задаем ему событие onclick в котором маленький скрипт — history.back();, который укажет браузеру посетителя, вернутся на один шаг назад, то есть на предыдущую ссылку, от куда был совершен переход. Готовый код выглядит следующим образом:
Вторая кнопка сделана с помощью обычной ссылки, которой зададим путь — href=»#» . Ссылке тоже задаем событие onclick и тот же самый скрипт, но с небольшим дополнениемhistory.back();return false;.Как видите, добавили — return false. Данный код означает, что перехода к href=»#» не будет. Готовый код будет таким:
Вот такие два простых способа, по сути один, с разными элементами. Теперь Вы сможете организовать у себя на сайте кнопку, которая будет возвращать посетителя назад.
На этом все, спасибо за внимание. ��
Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини 🙂
How to make an HTML back link?
What is the simplest way to create an <a> tag that links to the previous web page? Basically a simulated back button, but an actual hyperlink. Client-side technologies only, please.
Edit
Looking for solutions that have the benefit of showing the URL of the page you’re about to click on when hovering, like a normal, static hyperlink. I’d rather not have the user looking at history.go(-1) when hovering on a hyperlink. Best I’ve found so far is:
Is document.referrer reliable? Cross-browser safe? I’ll be happy to accept a better answer.
13 Answers 13
And another way:
This solution has the benefit of showing the URL of the linked-to page on hover, as most browsers do by default, instead of history.go(-1) or similar:
This solution gives you the best of both worlds
- Users get to hover over the link to see the URL
- Users don’t end up with a corrupted back-stack
More details in the code comments below.
you can try javascript
EDIT
and send the element a itself in onmouseover as follow
The easiest way is to use history.go(-1);
For going back to previous page using Anchor Tag <a> , below are 2 working methods and out of them 1st one is faster and have one great advantage in going back to previous page.
I have tried both methods.
Above method (1) works great if you have clicked on a link and opened link in a New Tab in current browser window.
Above method (2) only works ok if you have clicked on a link and opened link in a Current Tab in current browser window.