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:
<code><script type="text/javascript">
$(document).ready(function() {
$('#subir').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
</script></code>
3) Procure por </head> e cole o seguinte código ANTES da tag encontrada:
<code><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script></code>
4) Agora adicione o código abaixo onde você quer que fique o botão de subir:
<code><a href="#" id="subir"><b>Topo</b></a></code>
Geralmente é dentro de <div id=”footer”> ou algo relacionado a “footer”. Tudo depende do layout.
Agora salve e pronto. =]
Faça o teste: Topo
Recomendação
Precisa de um logo para o seu novo negócio? criar um logotipo online hoje.
Ótimo artigo, parabéns =]
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
@Raphael,
testei no FF e Chrome em 2 computadores. E está funcionando normalmente como coloquei.
não consegui quando chegoui na 3ª parte! um help plis
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.
@Robson,
gostei bastante do script. =]
Parabéns pelo trabalho também. Agradeço sua visita, volte sempre!
abraços
@Lucas, o que você não conseguiu?
Oi Paulo adorei esse botão de subir suavemente. Parabéns também ao Robson! Tchau e adorei seu blog!
Eu adorei esse botão, mas não subiu NADA suave. Foi tudod e uma vez! Me ajudaa!
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
@Hevellyn,
procure direito pois qualquer site/blog tem a tag head.
abraços
@Cadu,
você fez algo errado, pois o tutorial está 100%.
abraços
Gostei funcionou bem, só que tem um porem, a cor eu queria que ficasse em destaque (NEGRITO) e com fonte maior temo como fazer?
blz ficou otimo.vlwe
Use font-size: tamanho em pixels e font-weight: bold no CSS.
abraços
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.
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
Show de Bola em….
Tem gente que complica tanto pra ensinar tal efeito..
Parabéns pela simplicidade e eficácia.
Quando cheguei na parte 4 eu encontrei muitos “footer” qual deles é?
Faça o teste amigo, isso pode variar bastante.
abraços
ola brother, como eu faço para abrir páginas que estão uma abaixo da outra com este mesmo efeito?
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!!!!!!!!!!!!