Go back to previous page

A back link that calls history.back() only when the visitor came from your own site, and follows a real link everywhere else.

CL-0016 fixesChecked 2026-10-15

A blank luggage tag with an orange-red eyelet, its string looping back around it

1. The prompt

Not yet run against a named assistant · 106 words · CC-BY-4.0

Write a "go back" link in plain JavaScript with no dependencies. Start with a normal <a> element whose href is a sensible fallback page, so it works without scripts. In its click handler, leave clicks with any button other than the main one, and clicks with Ctrl, Cmd, Shift or Alt held, to the browser. Call history.back() only when document.referrer is on the same origin and history.length is greater than 1; otherwise let the link follow its href. Treat a missing or unreadable referrer as a direct visit. Attach the handler with addEventListener, not an inline onclick, and start the script with an SPDX-License-Identifier: MIT comment.

Why each line is there

go-back.js JavaScript · 22 lines Reviewed


      1// Back link: uses history.back() when the visitor came from this site,
2// otherwise follows the link's href like any normal link.
3// SPDX-License-Identifier: MIT
4// Source: https://codelifter.com/prompts/go-back/
5document.querySelectorAll("a.back-link").forEach((link) => {
6  link.addEventListener("click", (event) => {
7    // Leave new-tab and modified clicks to the browser.
8    if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
9      return;
10    }
11    let sameSite = false;
12    try {
13      sameSite = new URL(document.referrer).origin === location.origin;
14    } catch {
15      sameSite = false; // no referrer, or one the browser withheld
16    }
17    if (sameSite && history.length > 1) {
18      event.preventDefault();
19      history.back();
20    }
21  });
22});

2. What the prompt should produce. Load it after the markup below.

What a one-line prompt gets you

Representative output for “a go back button in JavaScript” and nothing else, written by the editors to show the pattern. It runs. It also leaves these gaps.

AI-generatedunreviewed

Shown for comparison. Do not ship.


      1<!-- Add this button anywhere on your page -->
2<button onclick="history.back()">Go Back</button>

Representative one-line-prompt output, written by the editors to show the pattern. Not a recorded generation.

1 It does nothing when there is no previous page.MDN says history.back() does nothing if there is no previous page, which is the case when someone opens your page in a new tab. The reviewed link follows its href instead.Prompt line: “Call history.back() only when document.referrer is on the same origin and history.length is greater than 1.”
2 Visitors from search are sent off your site.history.back() returns to whatever came before, including a search results page or another site. The reviewed code first checks that the referrer has your origin.Prompt line: “Call history.back() only when document.referrer is on the same origin.”
3 It does nothing without JavaScript.A button with an inline handler has no destination of its own. The reviewed control is a link with a real href, so it still goes somewhere when scripts fail.Prompt line: “Start with a normal <a> element whose href is a sensible fallback page.”
4 It cannot be opened in a new tab.A button has no address, so there is nothing for Ctrl-click or the context menu to open. The reviewed link leaves modified clicks to the browser.Prompt line: “Clicks with Ctrl, Cmd, Shift or Alt held, to the browser.”
5 The handler lives in the markup.An inline onclick ties script to one element and mixes it into the HTML. The reviewed script attaches one listener to every link with the class back-link.Prompt line: “Attach the handler with addEventListener, not an inline onclick.”
6 It carries no licence.Nothing records who wrote the line or on what terms it may be reused. The reviewed script starts with an SPDX MIT identifier.Prompt line: “Start the script with an SPDX-License-Identifier: MIT comment.”

Install it

1Paste the link where the back control belongs and point its fallback link at your own page: a section index, a search results page or your home page.
2Change the link text to say where it goes, such as Back to the article list, rather than a bare arrow or the word Back.
3Save the script as go-back.js and load it after the link, just before the closing body tag or with the defer attribute. Every link with the class back-link on the page will work.
4Test three ways: click through from another page on your site (it should go back), open the page in a new tab (it should follow the href), and arrive from a search engine (it should also follow the href).

index.html HTML · 2 lines Reviewed


      1<a href="/" class="back-link">Back to the previous page</a>
2<script src="go-back.js"></script>

Questions and answers

Has this prompt been tested with an assistant?

Not yet. The editors wrote the prompt to describe the reviewed code line by line. The code was tested by the editors in a current desktop browser on 2026-10-14 and re-run in a scripted DOM test on 2026-10-15. Nobody has run the prompt against a named assistant, so compare any answer you get with the code above.

Why not just call history.back()?

Because it fails in two common cases. MDN says the call does nothing when there is no previous page, and when there is one it may be a search results page or another site. The reviewed link handles both by falling back to its href.

Why does the script check history.length?

MDN describes history.length as the number of entries in the session history, including the current page, and notes that it is 1 for a page loaded in a new tab. A count of 1 means there is nowhere to go back to, so the link follows its href.

Does the referrer always exist?

No. MDN says document.referrer is an empty string when the visitor navigated to the page directly, for example from a bookmark. Building a URL from an empty string throws, and the script treats that as a direct visit and follows the link.

Is history.back() the same as history.go(-1)?

Yes. MDN states that history.back() has the same effect as calling history.go(-1).

Can I run code after the browser has gone back?

MDN notes that history.back() is asynchronous, so listen for the popstate event to know when the navigation has finished. The same page warns that browsers may throttle navigations, and may ignore the call, if a page navigates too often.

Should a back control be a link or a button?

A link, in this case, because it has a real destination. It works without JavaScript, can be opened in a new tab, and lands on a sensible page when there is no history to return to.

Can I use this back link on a commercial site?

Yes. The code is MIT licensed, which allows commercial use as long as the licence line stays with it. The prompt text is CC BY 4.0, so credit CodeLifter if you republish it.

Sources

1History: back() methodMDN Web Docs, checked 2026-10-15
2History: length propertyMDN Web Docs, checked 2026-10-15
3Document: referrer propertyMDN Web Docs, checked 2026-10-15