396

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.

1
  • 2
    JavaScript is a client-side technology, some clients (like me) just choose to disable it (by default). That's the power of the client! :D But yeah, there's no way for HTML on its own to determine what the previous page was.
    – animuson
    Commented Jan 11, 2012 at 5:15

14 Answers 14

680

And another way:

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

5
  • 19
    And for a button: <button type="button" onclick="javascript:history.back()">Back</button>
    – Leo
    Commented Aug 19, 2016 at 13:55
  • 3
    A downside of this approach is that standard browser features such as "hover to see URL" and right click -> copy link will be broken.
    – V Maharajh
    Commented Sep 11, 2017 at 19:38
  • 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. Commented Oct 9, 2018 at 2:29
  • This should really be the ONLY answer on this page - all others are either repetitive or less good therefore just simply obscuring this one... Commented Jan 10, 2022 at 10:44
  • This solution does not show the URL of the linked-to page, but it does go back to the page in the state it was in when left - in particular html forms still have their content. So this solution is a good one when working with forms. Commented Sep 29, 2023 at 9:40
116

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>
6
  • 9
    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. Commented Dec 5, 2012 at 3:52
  • 6
    This solution loses the link part following #, the 'javascript:history.back()' works correctly.
    – Liviu
    Commented Jun 18, 2013 at 21:32
  • 18
    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
    – atreeon
    Commented Jul 7, 2014 at 14:50
  • How can I make it so that in case there is no back page, then redirect to a fixed url history.back() || "myaction/mycontroller"
    – nest
    Commented Mar 20, 2015 at 10:33
  • @orangesherbert I've addressed this in a new answer (which also satisfies the "show URL" requirement.
    – V Maharajh
    Commented Sep 11, 2017 at 19:39
81

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>

3
  • 1
    Awesome answer. I use this in almost all of my knockout projects in the context of custom binding.
    – pim
    Commented Apr 13, 2018 at 18:13
  • Great answer! I had to add return false; to the onclick function in Chrome to keep it from adding the current page to the browser history. Commented Dec 7, 2018 at 19:59
  • 1
    The "most working" example. Thank you! Commented Dec 15, 2022 at 14:24
53

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

Try this:

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

50

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

2
  • can you explain that last edit? i just want a normal link like it shows in the bottom of most browsers.
    – calebds
    Commented Jan 11, 2012 at 6:25
  • as all browser shows for all for that you do not need to do anything but if you want to show it in your own div you can specify a div tabledescription anywhere in a page to show a link on mouse over of anchor tag Commented Jan 11, 2012 at 6:31
37

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.

1)

<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.

2)

<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.

0
20

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

2
  • 2
    Unlike the most voted solution, this maintains the scroll position the user had.
    – Jonathan
    Commented Sep 3, 2013 at 20:11
  • @Ketri can you provide support for the statement? they should be identical: w3schools.com/jsref/met_his_back.asp
    – FarO
    Commented Oct 6, 2017 at 9:47
11

try this

<a href="javascript:history.go(-1)"> Go Back </a>
1
  • This one worked!
    – Anoop V
    Commented Mar 29, 2022 at 14:16
7
<a href="#" onclick="history.back();">Back</a>
1
  • We must not leave the amount of href empty here. We can use # !
    – mehmet
    Commented May 9, 2022 at 10:07
5

The best way using a button is

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

1
1

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>
0

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>
2
  • 1
    document.write overwrites everything on the page. Why would you ever use that?
    – jpaugh
    Commented Jun 13, 2017 at 22:03
  • You must execute this script while page is still loading. Commented Jun 14, 2017 at 10:04
0

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)
);
0

Simple html ver

<a href="./">Go Back</a>

There are other URL traversal methods you can do like ../ and ./AnotherFoldreOnServer
This is dangerous, but also possible ../../../ etc..
But this is probably the easiest way without using JS to do this I know of..

Not the answer you're looking for? Browse other questions tagged or ask your own question.