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

fazer um botão que volta para a página anterior capa

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!

Subscribe
Notify of
guest

0 Comentários
Inline Feedbacks
View all comments