How to make an HTML back link?

How to make an HTML back link?

What is the simplest way to create an tag that links to the previous web page? Basically a simulated back button, but an actual hyperlink. Client-side technologies only, please.
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.


Solution 1:

And another way:

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

Solution 2:

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:

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

Solution 3:

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

Try this:

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

Solution 4:

you can try javascript

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

refer JavaScript
Back Button

Related:  What can the JavaScript prototype system do beyond mimicking a classical class system?


to display url of refer

and send the element a itself in onmouseover as follow

function showtext(thetext) {
  if (!document.getElementById)
  textcontainerobj = document.getElementById("tabledescription")
  browserdetect = textcontainerobj.filters ? "ie" : typeof == "string" ? "mozilla" : ""
  document.getElementById("tabledescription").innerHTML = thetext.href
  highlighting = setInterval("gradualfade(textcontainerobj)", 50)
 <a href="" onMouseover="showtext(this)" onMouseout="hidetext()">JavaScript Kit</a>

check jsfiddle

Solution 5:

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() {
  return false;
<a id="back-link">back</a>

Solution 6:

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.

Related:  Can you detect whether a device has phone capabilities (e.g. it can make voice calls/SMS) with JavaScript?

Simple ways are

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


function goBack() {
<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: