- How to make an HTML back link?
- 13 Answers 13
- How to create an HTML back button
- Using history.back
- Using history.go
- Related information
- How to make an HTML back link?
- Javascript Solutions
- Solution 1 — Javascript
- Solution 2 — Javascript
- Solution 3 — Javascript
- Solution 4 — Javascript
- Solution 5 — Javascript
- Solution 6 — Javascript
- Solution 7 — Javascript
How to make an HTML back link?
JavaScript is a client-side technology, some clients (like me) just choose to disable it (by default). That’s the power of the client! 😀 But yeah, there’s no way for HTML on its own to determine what the previous page was.
13 Answers 13
A downside of this approach is that standard browser features such as «hover to see URL» and right click -> copy link will be broken.
I think it’s more about semantics. A go back «button» is more apt than a go back «link». Both the options are great and both the options are correct in their own way.
This should really be the ONLY answer on this page — all others are either repetitive or less good therefore just simply obscuring this one.
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 also has the benefit of covering the case that the referring page opened with a target=»_blank» attribute on the link, which history.go(-1) does not.
The downside to this solution is that you will not be able to go back more than one page. Example; navigate to pages a,b,c,d — press back button repeatedly c,d,c,d,c,d. Compare this to .history.back() a,b,c,d press back button repeatedly d,c,b,a
How can I make it so that in case there is no back page, then redirect to a fixed url history.back() || «myaction/mycontroller»
@orangesherbert I’ve addressed this in a new answer (which also satisfies the «show URL» requirement.
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.
var element = document.getElementById('back-link'); // Provide a standard href to facilitate standard browser features such as // - Hover to see link // - Right click and copy link // - Right click and open in new tab element.setAttribute('href', document.referrer); // We can't let the browser use the above href for navigation. If it does, // the browser will think that it is a regular link, and place the current // page on the browser history, so that if the user clicks "back" again, // it'll actually return to this page. We need to perform a native back to // integrate properly into the browser's history behavior element.onclick = function() 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.
How to make an HTML back link?
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.
Javascript Solutions
Solution 1 — Javascript
Solution 2 — Javascript
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:
Solution 3 — Javascript
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.
var element = document.getElementById('back-link'); // Provide a standard href to facilitate standard browser features such as // - Hover to see link // - Right click and copy link // - Right click and open in new tab element.setAttribute('href', document.referrer); // We can't let the browser use the above href for navigation. If it does, // the browser will think that it is a regular link, and place the current // page on the browser history, so that if the user clicks "back" again, // it'll actually return to this page. We need to perform a native back to // integrate properly into the browser's history behavior element.onclick = function( ) < history.back(); return false; > Solution 4 — Javascript
and send the element a itself in onmouseover as follow
function showtext(thetext) < if (!document.getElementById) return textcontainerobj = document.getElementById("tabledescription") browserdetect = textcontainerobj.filters ? "ie" : typeof textcontainerobj.style.MozOpacity == "string" ? "mozilla" : "" instantset(baseopacity) document.getElementById("tabledescription").innerHTML = thetext.href highlighting = setInterval("gradualfade(textcontainerobj)", 50) > Solution 5 — Javascript
The easiest way is to use history.go(-1);
Solution 6 — Javascript
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.
It will not work if you have open link in New Tab. Here history.back() will not work if link is opened in New Tab of web browser.
Solution 7 — Javascript
A back link is a link that moves the browser backwards one page, as if the user had clicked the Back button available in most browsers. Back links use JavaScript. It moves the browser back one page if your browser supports JavaScript (which it does) and if it supports the window.history object, which is necessary for back links.
function goBack( ) < window.history.back() > Generally speaking a back link isn’t necessary… the Back button usually suffices quite nicely, and usually you can also simply link to the previous page in your site. However, sometimes you might want to provide a link back to one of several «previous» pages, and that’s where a back link comes in handy. So I refer you below tutorial if you want to do in more advanced way: