04/01/2012

Tutorial: Voltar ao topo com efeito deslizante


Vamos aprender a colocar a famosa seta de voltar ao topo do Tumblr?

Eu vi esse tutorial no Place Fame - Extras (todos os créditos ao blog) e adorei! Como podem ver, a setinha aí do lado inferior direito do blog tem esse efeito! Mas, vamos ao tutorial!

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

Depois procure por </head> e como anteriormente, ANTES dessa tag insira:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Agora você já pode inserir o código do efeito deslizante aonde quiser!
<a href="#" id="subir"><img src="URL_DA_IMAGEM"/></a>

Se quiser colocar um texto ao invés da imagem, substitua o código em vermelho pelo texto desejado.

Não se esqueçam de comentar! E se usarem deixem o link do blog para eu ver o resultado! =D

Beijos,
Camy!

11 comentários:

Sonhos Pré-Concebidos disse...

Awn obg pela visitinha lá no blog *-*
Volta sempre que quiser, tá?
TÔ SEGUINDO aqui já rs
Bjs, Nícia.

Curiosa disse...

Ah, de nada!
Obrigada por seguir!

Beijos,
Curiosa!

Jeferson Cardoso disse...

Camy, esse dispositivo é Show! Abraço amigo do blogueiro visitante! Feliz 2012!

“Para o legítimo sonhador não há sonho frustrado, mas sim sonho em curso” (@JefhcardosoReal)

Curiosa disse...

É muito bom mesmo!
Obrigada!

Beijos,
Camy!

Marcelo Alcântara disse...

Top, Top e Top ...

Eu estava a muito tempo procurando esse código, e quando achava, nunca dava certo (sempre dava algum tipo de erro)...

Desta vez, tudo ocorreu perfeitamente... Ficou Top...

Camy, Parabéns pelo tutorial, é assim que a legião de Blogueiros cresce, – um ajudando ao outro – compartilhando conhecimentos e informações.

QUEM QUISER PASSAR LÁ NO BLOG PARA CONFERIR O RESULTADO, FIQUE A VONTADE!

Abraço,

Lara Lis disse...

e para colocar o ultimo codigo onde quiser?

Fernanda disse...

Seguindoo
Segue d volt?
www.mundomaniateen.blogspot.com

Jeff disse...

Não dá pra usar duas vezes em uma mesma página, dá?

Matheus Ailton disse...

Quero ser afiliado do seu site http://pxmaster.artyweb.net/ se aceitar entre em contato pelo e-mail:matheus@tiw.com.br obrigado!!

Informática disse...

Muito bom Parabéns!

Matheus Ailton disse...

Muito legal mesmo Parabéns!

Postar um comentário

Não se esqueça de deixar seu comentário aí embaixo!

Related Posts Plugin for WordPress, Blogger...