Slik lager du JavaScript tilbakeknapp

En JavaScript-tilbakeknapp er en knapp eller lenke som sender den besøkende tilbake til forrige side ved hjelp av nettleserens egen historikk, akkurat som når du trykker på «Tilbake»-pilen øverst i nettleseren. Med én enkelt kodelinje kan du legge den inn på en hvilken som helst HTML-side. Samtidig finnes det både en gammel metode som i dag frarådes, og nyere, tryggere måter å gjøre det på. Denne guiden går gjennom alt fra den enkleste snutten til moderne History API og Navigation API, hvordan du gjør knappen tilgjengelig for alle, hvordan du styler den – og de vanligste feilene folk gjør underveis.

Hva er en JavaScript-tilbakeknapp?

En tilbakeknapp laget med JavaScript bruker nettleserens historikk til å navigere ett eller flere steg bakover. I motsetning til en vanlig lenke som peker til en fast adresse, vet ikke knappen på forhånd hvor den sender den besøkende – den sender dem rett og slett dit de kom fra. Hvis noen kom til siden din fra forsiden, går de tilbake til forsiden. Kom de fra et Google-søk, går de tilbake til søkeresultatet.

Historikken det er snakk om kalles «session history», altså listen over sidene som er besøkt i den aktuelle fanen. JavaScript gir deg tilgang til denne listen gjennom et innebygd objekt som heter history. Du trenger verken plugins, biblioteker som jQuery eller ekstra filer for å bruke det – funksjonaliteten er bygget rett inn i alle nettlesere og har vært det i mange år. Det er en av grunnene til at akkurat denne lille koden dukker opp på svært mange nettsteder.

Fordi knappen følger historikken i stedet for en fast URL, kan den også sende brukeren bort fra ditt eget nettsted dersom det var der de var sist. Det er viktig å være klar over: en tilbakeknapp er ikke det samme som en «hjem»-knapp eller en lenke til en bestemt kategori. Vil du alltid sende leseren til ett bestemt sted, bør du heller bruke en vanlig lenke – se guiden vår om hvordan du lager en HTML-lenke.

Den enkleste koden: history.go(-1)

Den klassiske varianten er en lenke som bruker history.go(-1). Tallet forteller nettleseren hvor mange steg den skal bevege seg i historikken. Verdien -1 betyr «ett steg bakover», mens for eksempel -3 hopper tre sider tilbake på én gang. Positive tall går forover.

<a href="javascript:history.go(-1)">Tilbake</a>

Denne koden lager en lenke med teksten «Tilbake» som fører den besøkende til forrige side. Endrer du verdien i parentesen til for eksempel -5, hopper nettleseren til siden brukeren var på fem klikk tidligere. Koden fungerer, men den bruker det som kalles javascript:-protokollen rett i href-attributtet, og det er en metode som moderne nettutviklere i dag anbefaler å styre unna. Lenger ned forklarer vi nøyaktig hvorfor, og hva du bør bruke i stedet.

history.back(), go() og forward() – hva er forskjellen?

history-objektet har flere metoder, og det er lett å blande dem sammen. Den viktigste innsikten er at history.back() og history.go(-1) gjør nøyaktig det samme: begge går ett steg bakover i historikken. Ifølge dokumentasjonen fra MDN er de to funksjonelt likeverdige. history.back() regnes som den tydeligste og mest lesbare varianten når du bare skal ett steg tilbake, mens history.go() er nyttig når du vil hoppe flere steg.

En viktig felle: history.go() uten noe tall – eller med tallet 0 – laster siden på nytt i stedet for å gå tilbake. Det er en helt annen oppførsel enn back(), som aldri laster siden på nytt. Alle metodene er dessuten asynkrone, noe som betyr at navigasjonen ikke nødvendigvis er fullført i samme øyeblikk du kaller funksjonen. Tabellen under oppsummerer forskjellene.

Hvis du vil forstå mer om hvordan JavaScript henger sammen med resten av nettsiden, kan det være nyttig å lese hvordan du kjører JavaScript fra en egen .js-fil. Det gir deg et ryddigere oppsett når koden vokser.

Derfor bør du unngå «javascript:» i href

Den gamle metoden med href="javascript:history.go(-1)" frarådes i dag av flere gode grunner, selv om den fortsatt virker i de fleste nettlesere. MDN beskriver javascript:-URL-er som noe man bør unngå, fordi de kan føre til uønsket kjøring av kode på samme måte som eval(), og fordi de bryter med hvordan lenker normalt oppfører seg.

De konkrete problemene er:

• Tilgjengelighet: En lenke med javascript: gir skjermlesere og annet hjelpemiddelutstyr feil beskjed. Brukeren får høre at dette er en vanlig lenke, men den fører ingen steder på vanlig vis.
• Brutt forventet oppførsel: Du kan ikke bokmerke lenken, åpne den i ny fane med museklikk, eller høyreklikke på den slik du ville gjort med en ekte lenke.
• Sikkerhet og CSP: Mange nettsteder bruker i dag en sikkerhetsregel som heter Content Security Policy (CSP), et sett med regler som bestemmer hvilken kode nettleseren får lov til å kjøre. Med en streng CSP blokkeres javascript:-URL-er med mindre du eksplisitt tillater såkalt «unsafe-inline» – noe som i seg selv svekker beskyttelsen mot angrep.
• Feil semantikk: En handling som «gå tilbake» er egentlig en knapp, ikke en navigasjonslenke til en adresse. HTML har et eget element for nettopp dette: <button>.

Bedre alternativ 1: onclick på en knapp

Det enkleste steget opp er å bytte lenken ut med et ekte knapp-element og flytte koden til et onclick-attributt:

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

Dette er bedre fordi elementet nå er en reell knapp, slik det bør være. Ulempen er at JavaScript-koden fortsatt ligger blandet sammen med HTML-en, noe som gjør det vanskeligere å vedlikeholde og å styre med en streng CSP.

Bedre alternativ 2: addEventListener (anbefalt)

Den anbefalte løsningen i dag er å holde HTML og JavaScript adskilt og koble handlingen på med addEventListener. Da gir du knappen en id, og legger logikken i et script:

<button id="tilbake">Tilbake</button>

<script>
document.getElementById("tilbake")
  .addEventListener("click", function () {
    history.back();
  });
</script>

Denne varianten er ren, lett å vedlikeholde og fungerer godt sammen med moderne sikkerhetsregler. Legger du koden i en egen .js-fil i stedet for i et innebygd script, blir oppsettet enda ryddigere og enklere å gjenbruke på flere sider.

Slik lager du en tilgjengelig tilbakeknapp

En god tilbakeknapp skal virke for alle, også for dem som ikke bruker mus eller som navigerer med tastatur og skjermleser. Når du bruker et ekte <button>-element, får du mye av tilgjengeligheten gratis: knappen kan nås med Tab-tasten og aktiveres med Enter eller mellomrom uten at du gjør noe ekstra.

Det store ankepunktet mot enhver tilbakeknapp er at den ikke gjør noe dersom det ikke finnes noen historikk å gå tilbake til. Åpner noen siden i en ny fane, klikker på en direktelenke fra sosiale medier, eller kommer rett inn fra et bokmerke, er history.length lik 1, og et klikk på knappen fører ingen steder. Da bør du ha en reserveløsning (fallback) som sender brukeren til et fornuftig sted, for eksempel forsiden:

document.getElementById("tilbake")
  .addEventListener("click", function () {
    if (window.history.length > 1) {
      history.back();
    } else {
      window.location.href = "/";
    }
  });

Her sjekker koden først om det finnes mer enn én oppføring i historikken. Hvis ja, går den tilbake som normalt. Hvis ikke, sendes brukeren til forsiden i stedet for å trykke på en knapp som ikke skjer noe med. Vurder også å skrive en tydelig tekst på knappen, som «Tilbake til forrige side», slik at det ikke er noen tvil om hva den gjør.

Den moderne måten: History API og Navigation API

For enkle nettsider holder det lenge med history.back(). Men på større, interaktive nettsteder – spesielt såkalte single-page applications (SPA), der innholdet byttes ut uten at hele siden lastes på nytt – trenger utviklere mer kontroll over historikken. Til det finnes det to mer avanserte verktøy.

History API – pushState og replaceState

History API er samlebetegnelsen på funksjonaliteten i history-objektet, og inkluderer to kraftige metoder: pushState() og replaceState(). Med pushState() legger du til en ny oppføring i historikken uten at nettleseren faktisk laster en ny side – nyttig når en app bytter «skjermbilde» men vil at tilbakeknappen fortsatt skal virke. replaceState() bytter ut den gjeldende oppføringen i stedet for å legge til en ny.

Begge tar imot et tilstandsobjekt, en tittel (som alle nettlesere unntatt Safari i praksis ignorerer) og en valgfri URL. Et viktig forbehold: URL-en må være på samme domene (samme «origin») som den siden du er på – ellers kaster nettleseren en sikkerhetsfeil. Når brukeren så trykker tilbake, kan du lytte på hendelsen popstate for å reagere på endringen. Dette er maskineriet rammeverk som React og Vue bruker for å få tilbakeknappen til å fungere i enkeltsideapplikasjoner.

Navigation API – navigation.back() og canGoBack

Navigation API er et nyere og mer robust alternativ til det klassiske History API. Ifølge MDN ble metodene navigation.back() og egenskapen canGoBack «Baseline» i januar 2026, altså bredt tilgjengelig – men her er det en viktig nyanse: det var lenge kun Chrome, Edge og Opera som støttet det, mens Firefox og Safari manglet støtte. Du bør derfor fortsatt ha en reserveløsning med det gamle API-et.

Det fine med Navigation API er at du enkelt kan sjekke om det i det hele tatt er mulig å gå tilbake, før du prøver. Egenskapen canGoBack returnerer true hvis det finnes en side å gå tilbake til. Kaller du navigation.back() når du allerede står på den første oppføringen, kastes det en feil – derfor sjekker du først:

if (window.navigation && navigation.canGoBack) {
  navigation.back();
} else {
  history.back();
}

Koden bruker det nye API-et der det finnes, og faller tilbake på den velprøvde history.back() ellers. For de aller fleste norske bloggere og mindre nettsteder er dette overkill – men det er greit å vite at det finnes når behovet melder seg.

Slik styler du tilbakeknappen med CSS

En knapp uten styling ser kjedelig ut og passer sjelden inn i designet. Med noen få linjer CSS kan du gjøre tilbakeknappen til en naturlig del av siden. Her er et enkelt utgangspunkt du kan tilpasse fargene på:

.tilbake-knapp {
  display: inline-block;
  padding: 10px 18px;
  background: #0066cc;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}
.tilbake-knapp:hover {
  background: #0052a3;
}

Legg klassen tilbake-knapp på <button>-elementet, så får du en pen, klikkbar knapp med tydelig hover-effekt. Vil du gå lenger med skygger, overganger og andre effekter, har vi samlet en rekke nyttige CSS-koder som gir designet litt edge. Du kan også lese mer om å legge til farge og størrelse på tekst med CSS og HTML hvis du vil finjustere knappeteksten.

Vanlige feil og fallgruver

Selv om koden er kort, er det noen gjentakende feil som er verdt å kjenne til før du publiserer:

• Knappen gjør ingenting: Den vanligste årsaken er at siden ble åpnet uten historikk (ny fane, direktelenke eller bokmerke). Bruk en fallback til forsiden slik vi viste over.
• Du forventer en «hjem»-knapp: history.back() sender brukeren dit de faktisk kom fra, ikke til et bestemt sted. Vil du alltid til forsiden, bruk en vanlig lenke.
• Du bruker go() i stedet for go(-1): history.go() uten tall laster siden på nytt. Husk minustegnet.
• javascript: blokkeres: På nettsteder med streng CSP virker ikke href="javascript:...". Bruk en knapp med addEventListener.
• Brukeren havner utenfor nettstedet ditt: Hvis forrige side lå på et annet domene, forsvinner besøkeren fra siden din. En fast lenke til en relevant kategori holder dem lenger.
• Script kjører før knappen finnes: Ligger <script> i <head> uten at du venter på at siden er lastet, finner ikke getElementById knappen. Plasser scriptet nederst, eller bruk en «DOMContentLoaded»-lytter.

Før du publiserer er det alltid lurt å validere koden på hjemmesiden, slik at små skrivefeil i HTML-en ikke ødelegger funksjonaliteten. Vil du se nøyaktig hvordan koden ser ut på et nettsted du beundrer, kan du lære å se HTML-kilden til en side.

Når passer en tilbakeknapp – og når gjør den ikke det?

En tilbakeknapp er mest nyttig i situasjoner der brukeren naturlig følger en sti og vil kunne gå ett steg bakover: en artikkel de klikket seg inn på fra en oversikt, et produkt de åpnet fra en liste, eller et skjema med flere steg. I slike tilfeller speiler knappen den handlingen brukeren allerede forventer.

På forsider, landingssider og sider folk ofte kommer rett til fra søk eller sosiale medier, gir en historikkbasert tilbakeknapp mindre mening, fordi det sjelden finnes en relevant «forrige side» innenfor nettstedet ditt. Der er en tydelig meny og gode interne lenker et bedre valg enn en tilbakeknapp. En god tommelfingerregel: bruk tilbakeknappen som et hjelpemiddel i tillegg til god navigasjon, aldri som erstatning for den. Trenger du å bygge opp strukturen fra bunnen, viser vi hvilke standard HTML-tagger du trenger for å lage en hjemmeside.

Vanlige spørsmål (FAQ)

Hva er forskjellen på history.back() og history.go(-1)?

Ingen praktisk forskjell – begge går nøyaktig ett steg tilbake i nettleserhistorikken. history.back() regnes som den tydeligste varianten når du kun skal ett steg tilbake, mens history.go() også lar deg hoppe flere steg med for eksempel -3.

Hvorfor virker ikke tilbakeknappen min?

Den vanligste årsaken er at det ikke finnes noen historikk å gå tilbake til. Hvis siden ble åpnet i en ny fane, via en direktelenke eller fra et bokmerke, er historikken tom, og knappen gjør ingenting. Legg inn en reserveløsning som sender brukeren til forsiden når history.length er 1.

Er det farlig å bruke javascript: i href?

Det er ikke farlig i seg selv, men det frarådes. Metoden svekker tilgjengeligheten, bryter forventet lenkeoppførsel og blokkeres av strenge sikkerhetsregler (Content Security Policy). Bruk heller et <button>-element med addEventListener.

Kan tilbakeknappen sende brukeren til et annet nettsted?

Ja. Siden knappen følger nettleserhistorikken og ikke en fast adresse, sender den brukeren dit de faktisk kom fra. Hvis det var et Google-søk eller et annet nettsted, forlater de siden din. Vil du alltid sende dem til et bestemt sted, bruk en vanlig lenke i stedet.

Trenger jeg jQuery eller en plugin for å lage en tilbakeknapp?

Nei. history-objektet er innebygd i alle nettlesere, så du trenger verken jQuery, biblioteker eller plugins. Ren HTML og noen få linjer JavaScript holder.