How to make an HTML back link?

JavascriptHtmlHyperlink

Javascript Problem Overview


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:

<script>
  document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

Is document.referrer reliable? Cross-browser safe? I'll be happy to accept a better answer.

Javascript Solutions


Solution 1 - Javascript

And another way:

<a href="javascript:history.back()">Go Back</a>

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:

<script>
    document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

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;
}

<a id="back-link">back</a>

Solution 4 - Javascript

you can try javascript

<A HREF="javascript:history.go(-1)">

refer JavaScript Back Button

EDIT

to display url of refer http://www.javascriptkit.com/javatutors/crossmenu2.shtml

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)
}

 <a href="http://www.javascriptkit.com" onMouseover="showtext(this)" onMouseout="hidetext()">JavaScript Kit</a>

check jsfiddle

Solution 5 - Javascript

The easiest way is to use history.go(-1);

Try this:

<a href="#" onclick="history.go(-1)">Go Back</a>

Solution 6 - Javascript

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.

<a href="#" onclick="location.href = document.referrer; return false;">Go Back</a>

Above method (1) works great if you have clicked on a link and opened link in a New Tab in current browser window.

<a href="javascript:history.back()">Go Back</a>

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.

Simple ways are

<a href="#" onClick="history.go(-1)">Go Back</a>

OR:

function goBack() {
  window.history.back()
}

<a href="#" onclick="goBack()" />Go Back</a>

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:

http://www.htmlcodetutorial.com/linking/linking_famsupp_108.html

Solution 8 - Javascript

try this

<a href="javascript:history.go(-1)"> Go Back </a>

Solution 9 - Javascript

<a href="#" onclick="history.back();">Back</a>

Solution 10 - Javascript

The best way using a button is

<input type= 'button' onclick='javascript:history.back();return false;' value='Back'>

Solution 11 - Javascript

You can also use history.back() alongside document.write() to show link only when there is actually somewhere to go back to:

<script>
  if (history.length > 1) {
    document.write('<a href="javascript:history.back()">Go back</a>');
  }
</script>

Solution 12 - Javascript

I used a window.history and returned a false so that the href is not navigated by the browser ( the default behavior ).

<a href="www.web.com" onclick="window.history.go(-1); return false;"> Link </a>

Solution 13 - Javascript

history.go(-1) doesn't work if you click around in the 2nd domain or if the referrer is empty.

So we have to store the historyCount on arriving to this domain and go back the number of navigations in this side minus 1.


// if referrer is different from this site
if (!document.referrer.includes(window.location.host)) {
  // store current history length
  localStorage.setItem('historyLength', `${history.length}`);
}

// Return to stored referrer on logo click
document.querySelector('header .logo').addEventListener('click', 
  () =>
   history.go(Number(localStorage.getItem('historyLength')) - history.length -1)
);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestioncalebdsView Question on Stackoverflow
Solution 1 - JavascriptBajrangView Answer on Stackoverflow
Solution 2 - JavascriptcalebdsView Answer on Stackoverflow
Solution 3 - JavascriptV MaharajhView Answer on Stackoverflow
Solution 4 - JavascriptHemant MetaliaView Answer on Stackoverflow
Solution 5 - JavascriptapiguyView Answer on Stackoverflow
Solution 6 - JavascriptG_realView Answer on Stackoverflow
Solution 7 - Javascriptuser319198View Answer on Stackoverflow
Solution 8 - JavascriptmackView Answer on Stackoverflow
Solution 9 - JavascriptRoee GavirelView Answer on Stackoverflow
Solution 10 - JavascriptAshutosh K SinghView Answer on Stackoverflow
Solution 11 - JavascriptLeonid VasilevView Answer on Stackoverflow
Solution 12 - JavascriptSuman DeolView Answer on Stackoverflow
Solution 13 - JavascriptChris GunawardenaView Answer on Stackoverflow