Create back and forward page navigation buttons for your website

Here are the codes that you can use to create back buttons and forward buttons for your website.

Create a back button

Copy and paste this code into your web page:

<form><input type="button" value="GO BACK " onclick="history.go(-1);return false;" /></form>

This will create a button with the words “Go back” on it.

You can use your own button (as opposed to the default button) by using this code:

<a href="#" onclick="history.go(-1);return false;"><img src="http://yourwebsite.com/images/back.png"></a>

And you could use simply text by using this code:

<a href="#" onclick="history.go(-1);return false;">Go back</a>

 

Create a forward button

In order to create a button that will take visitors forward a page, you use the same codes as above and simply change the number in parantheses.

<form><input type="button" value="GO FORWARD " onclick="history.go(1);return false;" /></form>

This will create a button with the words “Go forward” on it.

You can use your own button (as opposed to the default button) by using this code:

<a href="#" onclick="history.go(1);return false;"><img src="http://yourwebsite.com/images/forward.png"></a>

And you could use simply text by using this code:

<a href="#" onclick="history.go(1);return false;">Go forward</a>

 

In order to change the number of pages that the button takes you either forward or backward, simply change the number in parentheses to the number of pages you want people to go when they click it. For example:

<form><input type="button" value="GO FORWARD " onclick="history.go(3);return false;" /></form>

would take people forward 3 pages when they clicked the button.

 

Let me know if you run into any issues with this or have questions.

 

Note: these buttons/links require Javascript enabled in order to function.

Meet the author

Libby Fisher is an experienced freelance web developer, recently relocated from Seattle to Boston, and passionate about developing websites that are both aesthetically appealing and intuitively usable - or as she prefers: "beautifully effective."