Como fazer ancora dinâmica com JQuery

Um bom efeito de transição pode diferenciar seu site, veja como fazer ancora dinâmica com JQuery e atribua este diferencial ao seu site.

[ad#texto]

Você já viu aquele efeito bonitinho onde ao clicar com um link a página rola suavemente para a sua posição? Então, isso é um tipo de ancora implementada com JQuery, bem simples e funciona em todos os browsers, então veja como fazer ancora dinâmica com JQuery.

Como fazer ancora dinâmica com JQuery
Como fazer ancora dinâmica com JQuery

Vamos primeiro ao código:

function scrollAnimate(elemento, margem, velocidade, url){
 $(location).attr('href', url);
 
 if($(elemento).length > 0){
  posicao = $(elemento).offset().top - margem;
 }
 
 $('html, body').stop().animate({ scrollTop: posicao }, velocidade);
}

Vamos explicar primeiro os parâmetros desta função:

  • elemento: pode ser o class ou id de qualquer elemento DOM do HTML que será o destino da ancora;
  • margem: caso queira, pode pontuar uma margem para sobra no posicionamento;
  • velocidade: é a velocidade do movimento;
  • url: é a URL de destino, pode ser outra URL da original ou pode ser a mesma.

Uma vantagem desta função é que você pode apontar para a mesma URL e fazer um movimento de ancora ou ainda apontar para outra URL e com isso obter o efeito de rolamento na transição entre páginas.

A função foi testada em diversos browsers, do Google Chrome ao Internet Explorer e em todos o funcionamento foi total.

Não se esqueça de agregar o JQuery a sua página, se não fizer isso esta função não vai funcionar.

Pronto, agora você já sabe como fazer ancora dinâmica com JQuery.

Petter Rafael
Petter Rafael

Desenvolvedor Web atua com as tecnologias Java e PHP apoiadas pelos bancos de dados Oracle e MySQL. Além dos ambientes de desenvolvimento acima possuiu amplo conhecimento em servidores Apache/Tomcat, Photoshop, Arte & Foto, Flash e mais uma dezena de ferramentas e tecnologias emergentes. Atualmente colabora com o Viablog escrevendo sobre programação e tecnologia.

Assinar blog por e-mail

Digite seu endereço de e-mail para assinar este blog e receber notificações de novas publicações por e-mail.

Junte-se a 322 outros assinantes

Busca

setembro 2020
DSTQQSS
 12345
6789101112
13141516171819
20212223242526
27282930 

Categorias