30/07/2012

Tutorial: Voltar ao topo com efeito deslizante

||

Hayooo meus amores!!!! Bem sabe aquelas setinhas ou imagens no canto do blog? Que ao clicar sobe para o topo? Sim eu achei  esse mesmo, só que com um detalhe bem legal de subir com efeito de rolagem fofo, não é? Bem vamos ao codigo.
Primeiro vamos ao painel do seu Blog Design Editar Html ai ai mesmo! Aperte Ctrl+f e procure por </body>

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 amarelo pelo texto que quiser.

Ae se colocar em seu blog deixe um comentario e o link para que eu faça uma visita e veja irei amar fazer uma visitinha.

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram