Olá! Friday, 06 de December de 2024.



Dicas CódigoFonte.net
Monday, 25 de November de 2013

Efeito "Ir para o topo" com rolagem suave.

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..





Comentários do artigo [Novo comentário]

Peterson Tadeu Tomaz - 03 de July de 2014 - 12:48
Vlw, funcionou blza, sem erros!
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010