sábado, 13 de julho de 2013

Javascript e jQuery para voltar ao Topo da página

Hoje vamos aprender como criar uma função para levar o usuário ao topo da página HTML utilizando javascrip e jQuery.

Antes de mais nada precisamos chamar a biblioteca jQuery para utilizarmos seus recursos, como ja disse em um post anterior o google disponibiliza alguns links de bibliotecas jQuery, para quem não tem essa biblioteca jQuery é uma mão na roda.

Lembrando que a única restrinção para o uso de bibliotecas externas de suas páginas HTML é que para usá-las obviamente o navegador do usuário irá solicitar a biblioteca do outro dominio e depois irá carregá-la no seu site tornando a página um pouco mais lenta, tirando isso o resto é bem trnquilo.

Segue abaixo o link da biblioteca jQuery:

<script type="text/javascript"  
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/
jquery.min.js"></script>
 
depois de chamar a biblioteca basta colocar essa função na sua index 
ou página desejada:
   
<script type="text/javascript">
function topTop(){
    var totop = $(window).scrollTop()-8;
    if(totop <= 0){
       clearInterval(idInterval);
    }else{
        totop--;
        $(window).scrollTop(totop);
    }
}
 
function levTop(){
    idInterval = setInterval('topTop();', 1);
}
</script>
Depois de feito a função o link para executar a função ficaria 
da seguinte forma:
<a href="javascript:levTop();">Ir para topo</a>
É isso ai, pra quem tem um pouco de conhecimento de html 
e javascript é molesa... 
 

Um comentário: