mai
24
2012

Efeito “ir para o topo” , usando jquery

An article by admin Comentários

Bom , a dica hoje é muito simples , é muito provável que você já o tenha visto em alguma pagina web , trata-se do efeito “ir para o topo” , ou seja um simples efeito de rolagem de pagina , mas que da um efeito muito legal em um site .

É extremamente fácil de ser feito , apenas cinco linhas de códigos e o efeito já ira funcionar perfeitamente , é claro que primeiro você devera ”chamar” , ou seja incluir o jquery em sua pagina , para isso , há duas opções , a primeira seria ir ate o site oficial deles , e fazer o download da mesma , ou ir ate o menu superior “download” , e copiar o link da biblioteca hospedada no Google , como eu sempre faço .

Muito bem , apos escolher a forma de inclusão da biblioteca em sua pagina , basta agora que faça o seguinte :

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

Depois , basta usar o seguinte código :

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

E depois , inclua na pagina , alguma tag que receba a class top , que é a responsável por executar o efeito , no meu caso utilizei a tag “P” , como mostrado abaixo.