Creating an HTML back button

Updated: 07/25/2017 by Computer Hope

HTMLIt's easy to add a back button to your web page. When a visitor to your page clicks the button, they will be taken to the last page they visited, just as if they clicked the back button in their browser.

You can accomplish this by editing the HTML of your page, and adding a little JavaScript.

Note: These buttons won't work if the user has no browsing history. For example, if the user opens your page in a new browser tab or window, nothing will happen when they click the button.

Using history.back

In a web browser, the built-in JavaScript object window has an object called history that contains the URLs a user has visited in their current browser window. You can use the history.back() method to tell the browser to go back to the user's previous page.

An easy way to use this JavaScript is to add it to the onclick event attribute of a button. Here, we will create the button using a <form> element, containing an <input> element of the button type.

Insert the following HTML into your web page:

<form>
  <input type="button" value="Go back!" onclick="history.back()">
  </input>
</form>

The result will look like the button below. If you click it, you'll go back to the previous page in your history.

Using history.go

The history.go() method tells the browser to go to a specific page in the user's browsing history. You can specify which history item by putting a number inside the parentheses. In computer programming, this is called an argument.

If you specify the number -1 as your argument, the browser will go back one page in the browser's history. Here's the same code as above, using history.go(-1) instead of history.back().

<form>
  <input type="button" value="No, really, go back!" onclick="history.go(-1)">
  <input>
</form>

Additional information