Artigo: Âncora animada com JQuery - Gigasystems

JQuery

Em por

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.

âncora animada com 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. =)

Olá, deixe seu comentário para Âncora animada com JQuery

Enviando Comentário Fechar :/

Veja Também:

Artigos Relacionados a categoria: JQuery

Soluções

...CURTIU? AINDA NÃO VIU NOSSO PORTFÓLIO?


Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite, veja agora mesmo nossos Cases de Sucesso e tenha seu site nos padrões atuais preparado para maioria dos dispositivos e navegadores.