No tutorial de hoje vamos aprender um efeito muito simples e bonito, e que muitos sites utilizam deste recurso quando necessitam fazer âncoras em suas páginas, na qual clicamos em um menu/botão e a página desliza até um ponto desejado suavemente com o efeito animate do JQuery.

JQuery

Primeiramente vamos vamos criar nossa página HTML, e dentro das tags HEAD vamos adicionar nosso jquery para nossa animação.

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

Feito isso, ainda dentro das tags HEAD, vamos criar nossa função responsável pelo controle de nossa âncora, na qual definiremos para qual id ela vai deslizar a animação e seu tempo de execução, ou seja, o delay que ela leva até chegar onde desejamos.

 function rolar_para(elemento) { $('html, body').animate({ scrollTop: $(elemento).offset().top }, 2000); }

Nessa pequena função, recebemos como parâmetro o elemento na qual desejamos que nossa página deslize. Chamamos nosso seletor em nosso corpo da página, atribuindo um afeito chamado animate, no qual ele faz com que a página deslize suavemente, deixando a interação mais bonita.

Dentro da função animate, definimos que o scroll deve ir até o topo daquele elemento recebido como parâmetro, e no final aquele 2000 (dois mil), é o tempo do nosso delay, podendo deixar o deslizamento mais rápido ou mais suave, vai de sua preferência.

Nosso HTML fica da seguinte forma:

 <button type="button" onclick="rolar_para('#topo')">Topo</button>

Um botão com o evento onclick() para poder disparar/chamar nossa função, e lembrando sempre de passar o elemento que desejamos fazer a ligação da âncora, que no nosso exemplo ele está passando nossa div com id=topo, e assim nossa página deslizará até esse nosso elemento.

Feito isso agora basta você criar nossa div com id=topo onde desejar.

 <div id="topo"></div>

Pronto, ao clicar em nosso botão nossa função se encarregará de deslizar nossa página até este elemento.

Dúvidas, críticas ou sugestões comentem abaixo que teremos o prazer em ajuda-los. =)