Programação

Botão voltar ao topo (scrollTop) com jQuery

Bom, nesse tutorial eu vou mostrar como criar botão voltar ao topo (scrollTop) com jQuery, esse botão é bastante útil quando se tem uma página com bastante conteúdo, e que consequentemente, o rodapé fique muito distante do topo. O usuário também agradece, pois ao clicar no botão, ele é arrastado pro topo do site, sem precisar ficar subindo a barra de rolagem do navegador.

Veja o Exemplo

Botão voltar ao topo (scrollTop) com jQuery

1º Passo – Marcando o topo

Vamos inserir o id=voltarTopo onde queremos que o usuário seja levado quando clicar no botão voltar ao topo. Eu geralmente insiro no elemento < body > e é assim que vou mostrar no exemplo abaixo, usando o id nomeado de voltarTopo.

<body id="voltarTopo">

2º Passo – O jQuery

Vamos inserir o jQuery na nossa página e você pode colocar entre as tags < head >< /head > ou no rodapé do seu site (forma recomendada). Veja abaixo que estamos usando uma biblioteca jQuery versão 1.8 e esta sendo carregada direto da API do Google. Caso você já esteja chamando o jQuery na sua página, ignore essa etapa, caso você precise, veja esse post sobre conflito de jQuery.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Depois de inserirmos o jQuery, agora vamos colocar o script do botão, que na mesma lógica do exemplo acima, deve ser colocado entre as tags < head >< /head > ou no rodapé do seu site (forma recomendada). No script abaixo, o botão, só aparece numa distancia de 300px do topo , você pode alterar conforme suas necessidades.

<script type="text/javascript">
// Use jQuery com a variavel $j(...)
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(".voltarTopo").hide();
$j(function () {
$j(window).scroll(function () {
if ($j(this).scrollTop() > 300) {
$j('.voltarTopo').fadeIn();
} else {
$j('.voltarTopo').fadeOut();
}
});
$j('.voltarTopo').click(function() {
$j('body,html').animate({scrollTop:0},600);
}); 
	});});
</script>

Agora, vamos adicionar o botão (input) voltar ao topo, no conteúdo do site, perceba que novamente usaremos o id #voltarTopo dentro da função onclick do botão.
Eu vou inserir o código abaixo, do botão voltar ao topo (scrollTop), depois do conteúdo do site e antes do rodapé.

<input type="button" class="voltarTopo" onclick="$j('html,body').animate({scrollTop: $j('#voltarTopo').offset().top}, 2000);" value="Voltar ao topo" >

3º Passo – CSS Básico

Geralmente os botões ficam no canto direito da tela, com posições fixas, para acompanhar o usuário onde quer que ele esteja, então no exemplo que estamos fazendo do botão voltar ao topo com jQuery, eu usei o seguinte CSS.

.voltarTopo {
    background: none repeat scroll 0 0 #000000 !important;
    bottom: 20px !important;
    color: #FFFFFF;
    display: block;
    font-size: 10px;
    font-weight: bold;
    height: 20px;
    position: fixed;
    right: 30px;
    text-transform: uppercase;
    width: 120px;
}

Clique aqui e reveja o exemplo do botão para voltar ao topo do site com jquery (scrollToTop)
Clique aqui e veja o código completo no GitHub
Clique aqui e faça download dos arquivos do exemplo

Pronto, agora seus visitantes tem um botão voltar ao topo para facilitar a navegação no seu site e quem sabe, segurar o usuário por mais tempo na sua página, é isso, espero que tenham gostado.

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    43 respostas para Botão voltar ao topo (scrollTop) com jQuery

    1. Andrei escreveu em 19 de agosto de 2013

      Salvou minha vida!!!! editei o script pra tirar o hide e o fade e assim permitir colocar outros botões pra qualquer lugar da página e deu muito certo Brigadão!!!

    2. QCabeça escreveu em 19 de agosto de 2013

      Opa Andrei,
      Que bom que deu certo, você foi o 1º a comentar aqui no blog, eu que agradeço seu feedback.
      Um abraço.

    3. Mateus escreveu em 10 de setembro de 2013

      Obrigado! Tava difícil encontrar algo bem escrito em português! :)

    4. admin escreveu em 13 de setembro de 2013

      Que bom que ajudou Mateus. Abraços

    5. Alan escreveu em 23 de setembro de 2013

      parabéns!! excelente conteúdo ajudou e muitoo!!!

    6. admin escreveu em 23 de setembro de 2013

      Obrigado pelo Feedback Alan. Abraços

    7. Max guedes escreveu em 1 de outubro de 2013

      Muito bom o CÓDIGO \o/

      Me ajudou muito :D

    8. admin escreveu em 2 de outubro de 2013

      Que bom Max. Abraços

    9. Cassiano escreveu em 10 de dezembro de 2013

      Muito bom o conteúdo. Vou testar daqui a pouco o código e o esquema explicado. muito obrigado

    10. admin escreveu em 11 de dezembro de 2013

      Obrigado pelo elogio Cassiano, espero que tenha dado certo. Abraços

    11. design escreveu em 30 de janeiro de 2014

      o meu deu certinho! muito obrigado amigo! Precisando estamos ae.. abraço.

    12. admin escreveu em 30 de janeiro de 2014

      Maravilha amigão. Que bom que deu certo. Abraço.

    13. Willian escreveu em 15 de fevereiro de 2014

      PArabéns cara ..

    14. Qcabeca escreveu em 15 de fevereiro de 2014

      Obrigado Willian, Abs

    15. Gabriel escreveu em 25 de fevereiro de 2014

      Obrigado pela salvação! Post bem simples, prático, fácil e rápido.

      Muito obrigado mesmo.

      PS: eu ri pra krl com o “mussum ipsum”. Não conhecia ainda…

    16. Qcabeca escreveu em 25 de fevereiro de 2014

      Opa Gabriel, obrigado pelos elogios e que bom que te ajudou. Essa era a minha intenção, hahaha.

      Sobre o Mussum Ipsum, massa demais né? Agora só uso ele (http://mussumipsum.com)

      Abs

    17. Thiago escreveu em 20 de abril de 2014

      muito bom cara, foi rápido e fácil =D
      Mas eu queria saber como que eu faço pra página subir mais rápido e o que seria o valor 600 da linha 15:
      animate({scrollTop:0},600);

    18. Qcabeca escreveu em 21 de abril de 2014

      Thiago, o 600 é a velocidade, basta aumentar o valor para ficar mais rápido. Que bom que deu certo, sucesso ae, abs

    19. Silvia Prata escreveu em 13 de maio de 2014

      Olá! Muito obrigada pela ajuda! Estou só com um problema: No lugar do botão, aparece uma caixinha preta. O funcionamento está perfeito, só que não consigo editar. Gostaria de colocar uma imagem específica no lugar do botão. Como faço? Obrigada.

    20. Qcabeca escreveu em 16 de maio de 2014

      Olá Silvia, para colocar uma imagem, basta alterar a classe voltarTopo do CSS. Mude a propriedade background.

      Qualquer coisa, me avise. Sucesso ae, abraço

    21. andre escreveu em 15 de julho de 2014

      muito bom o codigo e tudo mais, tentei alterar ele um pouco para fazer o mesmo efeito que tem no do vagalume, mas nao está dando muito certo, quando estou no topo ele nao desaparece, como faz daí?

    22. Qcabeca escreveu em 15 de julho de 2014

      Pode me detalhar melhor? Quais alterações você fez?

    23. andre escreveu em 16 de julho de 2014

      Então eu adicionei uma div logo abaixo do body com a class voltarTopo e dentro eu chamei a imagem que eu queria, no final antes de fechar o body eu coloquei o seu script, o Jquery é chamado corretamente porem tem um script de animação de paginas para as ancoras
      $(‘.menu-scrool a’).click(function(){
      $(‘html,body’).animate({scrollTop: $($(this).attr(‘href’)).offset().top-5}, 1200, ‘easeOutBack’)
      return false;
      });

      var hash = (window.location.hash).replace(/^#/, ”);
      var quebra = hash.split(“,”);
      if(quebra[1]){
      $(‘html,body’).animate({scrollTop: $(“#”+quebra[1]).offset().top-5}, 1200, ‘easeOutBack’);
      $(“.menu-scrool a”).removeClass(“ativo”);
      $(quebra[1]).addClass(“ativo”);
      };

      depois eu havia percebido que com o seu código na pagina esse parava de funcionar e a imagem não desaparecia quando eu chegava ao topo (o site foi CONSTRUÍDO por outra empresa, e eu estou melhorando ele aos poucos), enfim parece um conflito de CÓDIGOS javascript…

    24. Qcabeca escreveu em 16 de julho de 2014

      André, deve ser conflito de jQuery mesmo. Dá uma olhada nesse artigo e veja se te ajuda. Por favor, me mantenha informado se deu certo ou não. Abs

    25. andre escreveu em 16 de julho de 2014

      dei uma alterada ficou assim, ainda não funciona, não sei se eu fiz certo:
      var $j = jQuery.noConflict();
      $j(document.ready(function(){
      $j(‘.menu-scrool a’).click(function(){
      $j(‘html,body’).animate({scrollTop: $j($j(this).attr(‘href’)).offset().top-5}, 1200, ‘easeOutBack’)
      return false;
      });

      var hash = (window.location.hash).replace(/^#/, ”);
      var quebra = hash.split(“,”);
      if(quebra[1]){
      $j(‘html,body’).animate({scrollTop: $j(“#”+quebra[1]).offset().top-5}, 1200, ‘easeOutBack’);
      $j(“.menu-scrool a”).removeClass(“ativo”);
      $j(quebra[1]).addClass(“ativo”);
      };

      $j(“.voltarTopo”).hide();
      $j(function () {
      $j(window).scroll(function () {
      if ($j(this).scrollTop() > 300) {
      $j(‘.voltarTopo’).fadeIn();
      } else {
      $j(‘.voltarTopo’).fadeOut();
      }
      });
      $j(‘.voltarTopo’).click(function() {
      $j(‘body,html’).animate({scrollTop:0},1200, ‘easeOutBack’);});
      });

      }));

    26. Qcabeca escreveu em 17 de julho de 2014

      André, tenta criar um var $j = jQuery.noConflict(); para uma função (Scroll página) e um var $s = jQuery.noConflict(); para a função do botão voltar ao topo. Caso não dê certo, me envie a URL pra eu verificar melhor.

    27. andre escreveu em 18 de julho de 2014

      Então, funcionou em parte….
      consegui resolver a animação de transição, porem a imagem ainda não oculta quando chega no topo. Outro detalhe, se você acessa o site (http://www.faifaculdades.edu.br/administracao.php) vai ver que o menu não está funcionando. o menu é chamado de uma pagina externa Como posso fazer para resolver isso? Obrigado :)

    28. andre escreveu em 18 de julho de 2014

      Detalhe o menu topo.php que ele inclui na pagina ele não chama nenhum script javascript, não sei como ele se relaciona… :/

    29. Qcabeca escreveu em 18 de julho de 2014

      Tá, vamos por partes: 1º entrei no link que você me enviou e não consegui ver o botão de “voltar ao topo”, onde ele esta? 2º Sobre o menu pelo que percebi aqui, os dois primeiros botões não funcionam porque o link esta com #, você tem que alterar no seu topo.php.

    30. andre escreveu em 18 de julho de 2014

      pois entao, o topo abre opções a baixo até se vc tirar o /administração e recarregar a pagina ele funciona legal. quanto ao botão voltar ao topo ele está com transparência de 0,3 na lateral direita do lado da pagina se mouse sobre ele aparece um pouco melhor;

    31. Qcabeca escreveu em 21 de julho de 2014

      André, você usa o FIREBUG né? Vi aqui pelo FIREBUG que esta com conflito ainda. Pelo visto deve ser na área do Menu do topo mesmo, O erro que que esta aparecendo é o $ is not a function então acredito que você consiga resolver da mesma forma que ensino aqui no blog. Sucesso.

    32. Cesar escreveu em 15 de agosto de 2014

      Obrigado pela dica…

    33. Qcabeca escreveu em 15 de agosto de 2014

      Que bom que ajudou Cesar. Sucesso ae. Abraço

    34. Maycon escreveu em 12 de janeiro de 2015

      Muito massa o seu tutorial, além disso muito bem explicado. Obrigado pela contribuição!

    35. Qcabeca escreveu em 12 de janeiro de 2015

      Que bom que ajudou Maycon, sucesso ae. Abraço

    36. caio escreveu em 4 de março de 2015

      Otimo seu codigo, muito funcional e simples.

      Como faço para fazer um botão para descer?quais alterações tenho que efetuar?
      Obrigado

    37. Qcabeca escreveu em 6 de março de 2015

      Caio, basta alterar o local do ID voltarTopo ao invés de deixar no body, deixe no rodapé do seu site.

      Sucesso ae. Abs

    38. Francisco das chagas escreveu em 28 de março de 2015

      Para fazer o texto aparecer é necessário apagar o “line-height: 100px;”, senão vai ficar só a caixinha preta.

    39. Qcabeca escreveu em 29 de março de 2015

      Obrigado pelo apontamento Francisco, já corrigi no post. Sucesso ae. Abs

    40. Helio Souza escreveu em 13 de abril de 2015

      Dae Rafa, seguinte: Tudo certo, mas eu não queria aquele botão horroroso. O que tu usa no blog é mais maneiro e tals. dei uma estilizada no css e fiz um lá, que é só um div contendo um <a href… e tals. E funciona, viu? só que ele quando clicado pisca uma vez no meio do caminho. tipo, clico e afasto o mouse, ele sobe no estado onmouseout, que no meu caso é alpha em 30%. antes de chegar ao topo ele vai, sozinho, mudar para alpha 100% (mouseover) e de novo para 30% (mouseout).
      to queimando a mufa aqui e nada… alguma sugestão?

    41. Qcabeca escreveu em 13 de abril de 2015

      Opa Hélio, em que parte do código está pra mudar com alpha? Tem como colar o código no pastebin ou algo assim? Abs

    42. roberto escreveu em 29 de abril de 2015

      Muito bom! Parabéns pela explicação! Vlw mesmo!!!

    43. Qcabeca escreveu em 11 de maio de 2015

      Obrigado pela visita e pelo elogio Roberto. Sucesso ae. Abs

    Envie seu comentário.

    Seu email não será publicado