JavaScript Back Button Using Browser History

Use JavaScript history.back() when a button should behave like the browser's Back button. It moves back one entry in the current tab's session history. The equivalent call is history.go(-1).

<button type="button" id="go-back">Back</button>
<script>
document.getElementById("go-back").addEventListener("click", () => {
  history.back();
});
</script>

If there is no previous entry in the session history, history.back() simply has no effect. A back button should therefore not be the only way users can reach an important destination.

Go Back One Page Top ↑

history.back() is the clearest method when the goal is exactly one step backward.

<button type="button" id="back-button">Back</button>
<script>
const backButton = document.getElementById("back-button");
backButton.addEventListener("click", () => history.back());
</script>

This performs the same navigation as history.go(-1). The browser controls the session-history entries; JavaScript does not get a readable list of previously visited URLs.

Move Back or Forward Multiple Entries Top ↑

Use history.go(delta) when you intentionally need to move more than one history entry. Negative numbers move backward and positive numbers move forward.

// Move back three entries
history.go(-3);

// Move forward two entries
history.go(2);

Forward navigation works only when matching forward entries already exist in the current session history. Calling history.go(0) or history.go() reloads the current page, so do not use either when you mean “back.”

Compact Inline Button Example Top ↑

For a very small demonstration, an inline click handler works, although separating JavaScript from markup is usually easier to maintain in larger pages.

<button type="button" onclick="history.back()">Back</button>

The original Plus2net example used an <input type="button">. That remains valid HTML, but <button> is usually clearer and more flexible for button content.

<input type="button" value="Back" onclick="history.go(-1)">

Why Not Use javascript: in a Link? Top ↑

An older pattern is:

<!-- Legacy pattern: avoid as the recommended approach -->
<a href="javascript:history.back()">Back to previous page</a>

That mixes behavior into a URL attribute and gives an anchor an action rather than a real navigation destination. For a JavaScript action, use a <button>. For a known destination such as a home, category or form page, use a normal <a href="..."> link.

Session History Limitations Top ↑

• history.back() affects the current tab or frame's session history.
• If there is no earlier entry, moving back has no effect.
• history.go(-3) cannot create missing history entries.
• JavaScript cannot read the URLs of other session-history entries for security reasons.
• History navigation is asynchronous; applications that must respond after navigation should use the appropriate history/navigation events.

For a deeper JavaScript explanation, see the existing JavaScript history object tutorial.

Accessibility and UX Top ↑

Use a real <button type="button"> for the back action so it receives the expected keyboard behavior and semantics. Give the control a clear visible label such as “Back” or “Back to results.”

Do not unexpectedly send users several pages backward unless the interface clearly explains what will happen. When the destination is known, a normal link is usually more predictable than relying on browser history.

Common Back-Button Mistakes Top ↑

Using a link with javascript: Top ↑

Use a button for a JavaScript action instead of placing JavaScript in an anchor's href.

Assuming a previous page always exists Top ↑

A visitor may open the page directly or in a new tab. In that case, a back call may do nothing.

Using history.go(0) for Back Top ↑

history.go(0) reloads the current page. Use history.back() or history.go(-1) to go backward.

Using the Back button as the only navigation Top ↑

Important destinations should still have normal links because session history depends on how the visitor arrived.

Related Tutorials Top ↑

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: