Já conhecia há um tempo esta solução para fazer scroll animado em sites. Trata-se de uma solução legal e que funciona bem, no entanto ela tem certas limitações:

1 - Só permite rolagem na vertical, e não na horizontal
2 - Não é muito elegante em termos de código
3 - Não é muito flexível
4 - Só permite que se usem como “alvos” elementos <a> com atributo “name”

Pensando em ter uma solução melhor que resolvesse estes problemas, resolvi criar um plugin para jQuery que permite a utilização de scrolls bonitinhos sem muito esforço e com muita elegância

Trata-se do jQuery Smooth Scroll, vocês podem ver uma demonstração dele funcionando aqui. Experimentem clicar nos links do menu ;). Este efeito tem sido utilizado bastante em sites, onde a navegação é em apenas uma página e em vez da pessoa ter que rolar a página para baixo (ou para os lados), os próprios links fazem isso, e de um modo bem agradável.

#COMOFAS?

Crie os elementos para os quais você quer rolar. Digamos que você tenha um site muito comprido na vertical, com um longo texto, e queira dar a opção para o usuário voltar ao topo sem precisar ele mesmo rolar a página, você faz assim:

<div id="topo">(conteudo do topo)</div>

E lá no final do texto, assim:

<a href="#topo">Voltar ao topo ^</a>

Desta forma, clicando no link a página vai rolar ao topo, mesmo sem javascript nenhum, apenas sem o efeito bacana.

E agora? Como faço o efeitinho?

É muito simples, primeiramente baixe a biblioteca jQuery (que imagino que você já deva estar usando, hein?), e após isso baixe o plugin jQuery Smooth Scroll.

Feito isso, não esqueça de incluí-los em seu head:

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

Para que determinado link chame o efeito, você precisa selecioná-lo com o jQuery e chamar a função smoothScroll. Digamos que eu tenha numa página diversos links com hrefs semelhantes ao que mostrei anteriormente, “#nomedoelemento” como href. Eu posso fazer assim:

		$(function(){			
			$("a[href^=#]").smoothScroll(300,20,20,20)
		})

Desta forma, todos os links cujo href iniciar com um sustenido (a href=”#…”) irão disparar o efeito. O plugin se encarrega automaticamente de detectar a posição do elemento com aquele ID e de fazer todo o resto, você só precisa chamar a função. Note que ela pode receber 4 parâmetros (os 4 são opcionais, você pode chamar ela sem nenhum se quiser). São eles:

- Duração do efeito: O tempo que o efeito irá demorar, em milisegundos (o padrão é 500)
- Velocidade do efeito: A velocidade média em que a página irá rolar (o padrão é 10). Note que a velocidade varia por causa do easing, em vez do efeito ocorrer de forma linear, ele forma uma curva na sua velocidade (no começo vai devagar, acelerando aos poucos, e quando está chegando no destino vai ficando mais devagar até parar).
- Margem esquerda: Isto serve para dar um espaço extra na lateral esquerda, desta forma o elemento de destino não fica “grudado” no canto da tela (o padrão é zero)
- Margem superior: O mesmo que o anterior, só que para o topo do elemento (o padrão é zero)

Então é isso, espero que tenham gostado do plugin e que utilizem-no para dar um charme a mais nos seus sites

Para finalizar, confira 3 sites que utilizam scroll animado e navegação horizontal:

- deanoakley.com/
- inside.nile.ru/
- www.johanndizon.com/

Até mais!