Voltar ao topo da página com JavaScript

Neste artigo você vai aprender a como criar a funcionalidade de voltar ao topo da página com JavaScript, ativando o scroll para o início por um botão

Fala programador(a), beleza? Bora aprender mais sobre eventos de DOM e manipulação do scroll

Este recurso também é conhecido como back to top, podemos facilmente fazer com JavaScript

Vamos primeiro ao código HTML:

<button id="back-to-top">Voltar ao topo</button>

Vamos também adicionar CSS para deixar o botão sempre presente na tela, o que é muito comum para este recurso

Veja um exemplo:

#back-to-top {
  position: fixed;
  bottom: 50px;
  right: 50px;
}

Agora vamos ao JavaScript necessário:

var btn = document.querySelector("#back-to-top");

btn.addEventListener("click", function() {
    window.scrollTo(0, 0);
});

Desta maneira o botão ganha um evento de clique que trás a página ao topo, ou seja, o evento de back to top foi implementado

Outra possibilidade é utilizando o jQuery

Onde conseguimos criar um evento de animação também, de modo muito simples

Back to top com jQuery

Vamos manter o mesmo código CSS e HTML, e alterar apenas o JavaScript puro para jQuery

Veja o que é necessário:

var btn = $("#back-to-top");

btn.click(function() {
  $('html, body').animate({scrollTop:0}, 'slow');
});

Da mesma maneira devemos selecionar o elemento

O que muda é que utilizamos animate, para animar a subida do scroll até o topo

E desta maneira há uma modificação suave da posição atual até o início da página, o que pode ser mais interessante em alguns casos

Porém se não há necessidade no seu projeto, opte por JavaScript Vanilla

Conclusão

Neste artigo vimos como voltar ao topo da página com JavaScript

Apenas precisamos adicionar um evento que delimite a nova posição da página como 0, que é o topo

E também vimos uma versão com jQuery, onde o evento é muito semelhante

Mas com jQuery é mais fácil de manipular a animação, realizando um scroll suave até o topo da página

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube