Foward and Back Buttons

---

Home/JavaScript/Basics/History Buttons

Browser Compatibility:    NS2.02+, IE4+

Well, you want to make a back button- but you want the button to take the viewer back to the page they just came from, which may not have been one of your pages. This kind of back button would act like the back button on a web browser. Well, if you really want to have one, you can do it with a nifty little javascript. Here it is:

<FORM>
<INPUT type="button" value="Click here to go back" onClick="history.back()">
</FORM>

This will place a button on your page that will send the user back to the last page in their history list before yours. To try it out, click the link below and see the button on the new page.

Example Page

And when you clicked the button, you ended up back here. You can try going to the example page from elsewhere......you'll just be sent back there when you click the button....

So, what does all of that code mean? Okay, here's the scoop:

1. <FORM>
   This opens a form so we can use the button on the page.

2. <INPUT type="button" value="Click here to go back".....
   This creates the button we use for the script.

3. ....onClick="history.back()">
   This is what makes everything happen. The onClick=" " tells the browser to do the command in the quotes when the button is clicked. The history.back() is the function that does just what it says: It takes the viewer on step back in their history list.

Is there more? ..I thought you'd never ask......

Okay, you can swap out the history.back() function above with one of the following to do some different things:

1. history.forward()
   This will take the viewer one step forward in their history list.

2. history.go(-1) or history.go(1)
   This allows you to determine how far forward or back to take the viewer. Use a minus sign and a number to go back, or just a number to go forward.

Try really confusing somebody by using -7 or 12 or something. I sure would wonder what happened if I ended up seven pages back from where I was!

That does it for now, let's go on to JS Alerts

---

---

Other Topics: ASP/PHP | DHTML | Java

---

The tutorials and articles on these pages are © 1997-2010 by John Pollock and may not be reposted without written permission from the author, and may not be reprinted for profit. Disclaimer.

---