How to Create Back Buttons on Web Pages

The trouble with using hard coded URLs with back buttons or back text links on your web site is that you really don't know which page someone came from to get to where they are. You can assume they made a logical progression through your site but that often isn't the case.

They may have clicked a link from a search engine or another site that took them to somewhere deep within your site (which is why you should have a "home" link on every page), so a hard coded back link can confuse your visitors if "back" takes them to a page they haven't seen.

If only there were a way to do it automatically. Ta-da . . . Boogie Jack to the rescue! You can use a simple JavaScript with a form button that will take your guest back to the page they came from using their own browser history. It's easy, and goes a little like this:

<form>
<input type="button" value="Back" 
 onClick="history.go(-1);return true;"> 
</form>

That will take them to wherever they came from, even if it wasn't one of your own pages. It's a standard looking form button like you see on most forms. You can dress up the form button using CSS if you like, and I have a fancy form buttons tutorial if you don't know how.

Now, look in the code above where it says Back ...that's what will be written across the button. You can change that to anything you want, like "back to where you came from you wascally wabbit," but the longer the text you put on the button, the longer the button will be.

A Dirty Little Trick

Feeling mischievious? Change the "-1" to "-3" and send them 3 pages back in their browser history. You wouldn't really do that, would you? ;-)

Back Text Link

If you prefer a text link to take a user back one page, here's how to create a back text link:

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

There you go, Uncle Mary.

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]