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.

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.