Adicionar a Meu favorito

Monday, 25 de November de 2013

Bom dia galera, meu primeiro tutorial aqui no site.
Vocês aprenderão hoje a criar um botão "Ir para o topo da página" com jQuery + o plugin jQuery Easing para deixar a rolagem suave.

Primeiramente você deve verificar se a sua página já possui o jQuery, se não tiver, faça o download aqui (http://jquery.com/download/). Feito isso vamos ao código.

O código é bem simples e funcional, vamos usar a função .animate() do jQuery para o efeito.

Código:

<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script>

function toTop(){
$('html, body').animate({
scrollTop: 0
}, 1000, 'linear');
}

</script>

<a href="javascript:toTop();" title="Para o alto, e avante!" />Ir para o topo!</a>

Ok, aqui temos o efeito pronto, já pode ser usado.
Mas eu não fico satisfeito com o simples haha, então vamos adicionar efeitos de easing para a rolagem até o topo ficar mais... interessante.

Teremos que fazer o download do pluguin jQuery Easing aqui (http://gsgd.co.uk/sandbox/jquery/easing/), ou você também pode usar o jQuery UI, pois ele já vem com esses efeitos. Aqui vamos usar o jQuery Easing por ser menor e menos complicado de baixar.. Feito isso vamos melhorar o código.

<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/jquery/jquery.easing.js" type="text/javascript"></script>
<script>

function toTop(){
$('html, body').animate({
scrollTop: 0
}, 1000, 'easeInOutCirc');
}

</script>

Se você testar vai ver que o efeito é completamente diferente. Isso acontece por usamos o efeito easing. O site http://easings.net/pt-br tem a referencia completa para os efeitos easing, é só passar o mouse por cima que você verá o efeito acontecendo. Gostou de algum? Quer mudar? É só trocar ali onde está 'easeInOutCirc' pelo nome do easing que deseja..

É isso ai galera, espero que gostem do tutorial.
Até a próxima..

Outros artigos

Assine o Feed desta categoria

• Desabilitar botão direito do mouse - 08/03/2011
• Menu horizontal com jQuery - 01/11/2010
• Identificando a URL da página - 05/09/2010
• Descobrindo Teclas - 03/02/2010
• Ver mais...

Comentários do artigo [Novo comentário]