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.
