Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1500502712
Vida do cache: 1500545912
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Dicas layouts Recursos

Botão ir ao topo da página com efeito deslizante

Um botão de ir para o início da página é interessante, pois facilita para o usuário e pode melhorar o tempo de permanência da pessoa em seu blog/site. Pode parecer algo inútil, mas existem internautas de todos os tipos, inclusive aqueles que saem do seu site por preguiça de voltar ao topo e olhar outras páginas.

No site do Robson Moulin (webdesign), encontrei um código bem simples e que funciona de maneira suave (não sobe a página de uma vez e sim com um efeito deslizante).

Para instalar em seu blog é só seguir as orientações:

1) Entre no painel de administração do seu blog (Blogger, WordPress ou qualquer outro), depois na área de edição do layout;

2) Procure (Ctrl +f) por </body> e insira o seguinte código ANTES da tag encontrada:

<script type="text/javascript">
    $(document).ready(function() {
       $('#subir').click(function(){
          $('html, body').animate({scrollTop:0}, 'slow');
      return false;
         });
     });
</script>

3) Procure por </head> e cole o seguinte código ANTES da tag encontrada:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

4) Agora adicione o código abaixo onde você quer que fique o botão de subir:

<a href="#" id="subir">Topo</a>

Geralmente é dentro de <div id="footer"> ou algo relacionado a “footer”. Tudo depende do layout.

Agora salve e pronto. =]

Faça o teste: Topo



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

23 Comentários

  1. Micael Souza disse:

    Ótimo artigo, parabéns =]

  2. Raphael disse:

    O teste não funciona porque a URL base está aquela do momento da postagem. Coloca a expr:href = 'window.href.location' + '#' ou coisa assim

  3. Paulo Estevão disse:

    @Raphael,
    testei no FF e Chrome em 2 computadores. E está funcionando normalmente como coloquei.

  4. Lucas Batista disse:

    não consegui quando chegoui na 3ª parte! um help plis

  5. Robson Moulin disse:

    Olá Paulo, sou o Robson Moulin ao qual você mencionou, que bom que minha página foi útil para você, agradeço por estar divulgando aqui em sue blog também.

    curti bastante seu blog!
    Parabéns, voltarei mais vezes.

  6. Paulo Estevão disse:

    @Robson,
    gostei bastante do script. =]
    Parabéns pelo trabalho também. Agradeço sua visita, volte sempre!

    abraços

  7. Paulo Estevão disse:

    @Lucas, o que você não conseguiu?

  8. Cadu C. disse:

    Oi Paulo adorei esse botão de subir suavemente. Parabéns também ao Robson! Tchau e adorei seu blog!

  9. Cadu C. disse:

    Eu adorei esse botão, mas não subiu NADA suave. Foi tudod e uma vez! Me ajudaa!

  10. Hevellyn Souza disse:

    Ah, eu consegui os dois, só nao consegui a terceira parte. Porque eu nao acho um lugar pra colocar. Não sei onde coloca a parte da terceira coisa.

    Gostaria muito de colocar isso em meu blog.

    Obrigada

  11. Paulo Estevão disse:

    @Hevellyn,
    procure direito pois qualquer site/blog tem a tag head.

    abraços

  12. Paulo Estevão disse:

    @Cadu,
    você fez algo errado, pois o tutorial está 100%.
    abraços

  13. montha disse:

    Gostei funcionou bem, só que tem um porem, a cor eu queria que ficasse em destaque (NEGRITO) e com fonte maior temo como fazer?

  14. Julio Cezar disse:

    blz ficou otimo.vlwe

  15. Paulo Estevão disse:

    Use font-size: tamanho em pixels e font-weight: bold no CSS.

    abraços

  16. Filipe Willian disse:

    Paulo Estevão para ajudar os iniciantes em blogs ou os que não acharam a sua ancora,coloca em baixo do widget attribution.aperte ctrl+f e procure abaixo o código :

    Depois de achar coloque embaixo das duas div fechadas.

    a ESCRITA "TOPO" ira ficar do lado direito < do blog no final da pagina.

  17. Filipe Willian disse:

    Paulo Estevão ou então é acima da div, div class='footer-cap-bottom cap-bottom'

    O comentário não aceitou eu coloquar o código div por isso tirei algumas partes

  18. Marcelo disse:

    Tem gente que complica tanto pra ensinar tal efeito..

    Parabéns pela simplicidade e eficácia.

  19. Não vo falar disse:

    Quando cheguei na parte 4 eu encontrei muitos “footer” qual deles é?

  20. jardel disse:

    ola brother, como eu faço para abrir páginas que estão uma abaixo da outra com este mesmo efeito?

  21. Pessoal É FACIL DE MAIS VAI NO SEU BLOG VAI EM LAYOUT DEPOIS CLICA EM Adicionar um Gadget DEPOS DE VOCE TER CLICADO CLICA EM HTML/JavaScript DEPOIS COLOCA O TITULO DE Topo No Site DEPOIS VOCE COLOCA ESSE CODIGO QUE ESTA AKI EM BAIXO DEPOIS DE VOCE TER COPIADO E COLADO LÁ CLICA EM SALVA E PRONTO JA TEM SEU TOPO NO BLOG QEM CONSEGUIR DA UM COMENTARIO VLWW!!!!!!!!!!!!

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.