Como fazer um botão que volta para a página anterior com JS

Neste artigo você vai aprender a como fazer um botão que volta para a página anterior com JavaScript, utilizando uma simples abordagem

Fala programador(a), beleza? Bora aprender mais sobre recursos de navegação com JavaScript!

Muitas vezes precisamos fazer com que um botão ou link volte para a página anterior quando clicado.

Isso é bem simples de ser feito com JavaScript.

Para fazer isso, basta utilizar o método history.back() da seguinte forma:

function voltarPaginaAnterior() {
  history.back();
}

document.getElementById("meu-botao").addEventListener("click", voltarPaginaAnterior);

Aqui, criamos uma função chamada voltarPaginaAnterior que utiliza o método history.back() para voltar para a página anterior.

Em seguida, adicionamos um evento de clique ao elemento cujo o id é “meu-botao”.

Quando o usuário clicar no botão, a função será chamada e o usuário será redirecionado para a página anterior.

Mas e se quisermos fazer isso através de um link? Basta utilizar o atributo href da seguinte forma:

<a href="#" onclick="history.back()">Voltar</a>

Aqui, criamos um link cujo o atributo href é “#” (o que evita que o usuário seja redirecionado para outra página quando clicar no link).

Em seguida, adicionamos o evento de clique utilizando o atributo onclick e chamamos o método history.back() quando o usuário clicar no link.

Outra forma de criar a funcinalidade de voltar para página anterior

function voltarPaginaAnterior() {
  location.replace(document.referrer);
}

document.getElementById("meu-botao").addEventListener("click", voltarPaginaAnterior);

Aqui, criamos uma função chamada voltarPaginaAnterior que utiliza o método location.replace e a propriedade document.referrer para redirecionar o usuário para a página anterior.

Em seguida, adicionamos um evento de clique ao elemento cujo o id é “meu-botao”.

Quando o usuário clicar no botão, a função será chamada e o usuário será redirecionado para a página anterior.

E se quisermos fazer isso através de um link? Basta utilizar o atributo href da seguinte forma:

<a href="#" onclick="location.replace(document.referrer)">Voltar</a>

Aqui, criamos um link cujo o atributo href é “#” (o que evita que o usuário seja redirecionado para outra página quando clicar no link).

Em seguida, adicionamos o evento de clique utilizando o atributo onclick e chamamos o método location.replace com a propriedade document.referrer quando o usuário clicar no link.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você viu como fazer um botão que volta para a página anterior com JavaScript

Utilizamos duas abordagens diferentes, agora basta você escolher a que encaixa melhor no seu projeto!

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

history.back() ou history.go(-1)? Qual usar

Se você pesquisou um pouco, deve ter visto os dois por aí e ficado na dúvida

A real é que eles fazem a MESMA coisa: voltam uma página no histórico

function voltarPaginaAnterior() { history.go(-1) }

document.getElementById("meu-botao").addEventListener("click", voltarPaginaAnterior)

O history.back() é só um atalho pra history.go(-1)

A diferença é que o go() aceita um número, então ele te dá mais controle quando você quer pular mais de uma página de uma vez (a gente vê isso já já)

Ou seja: pra voltar uma página só, tanto faz, use o que achar mais legível =)

Como voltar mais de uma página com JavaScript

Às vezes uma página só não resolve, você quer jogar o usuário duas ou três telas pra trás

É aqui que o history.go() brilha, é só passar o número negativo de quantas páginas você quer voltar

function voltarDuasPaginas() { history.go(-2) }

document.getElementById("meu-botao").addEventListener("click", voltarDuasPaginas)

O -2 volta duas páginas, o -3 volta três, e por aí vai

E se quiser ir pra frente de novo? Usa o history.forward() ou o history.go(1), mesma lógica só que no sentido contrário

Perguntas frequentes

O botão voltar funciona sem JavaScript?

Com link puro dá pra usar o onclick chamando o history.back(), que é o que mostramos aqui. HTML sozinho, sem nenhum JavaScript, não tem um recurso nativo de voltar no histórico, então o history entra pra resolver isso

E se não existir página anterior?

Se o usuário abriu sua página direto, sem vir de nenhum lugar, o histórico não tem pra onde voltar e o botão simplesmente não faz nada. No caso do document.referrer isso fica em branco, então vale testar antes se você depende dele

Qual a diferença entre history.back() e location.replace(document.referrer)?

O history.back() anda no histórico do navegador, como se o usuário tivesse clicado no botão de voltar dele. Já o location.replace(document.referrer) manda pra URL de onde a pessoa veio e TROCA a entrada atual do histórico, então essa página não fica no caminho de voltar depois. São jeitos diferentes de chegar num resultado parecido, escolhe o que encaixa no seu projeto