Logotipo Design Interativo
Site Âncora Simples com Efeito Animate do JQuery

Site Âncora Simples com Efeito Animate do JQuery


Simplicidade e rico em efeitos os sites com âncoras no menu para redirecionar para sessões especificas de uma página são uma ótima opção para hotsite de produtos e eventos, abaixo disponibilizo um script simples de implementar e com todos os efeitos disponíveis com a função animate do JQuery.

Primeiramente você deve inserir a biblioteca JQuery, você pode fazer download no site do JQuery ou então utilizar a base do Google

 

No head do seu site ou onde preferir você insere o script abaixo, nos comentários do script inseri todos os efeitos animate para substituir no final da linha de código onde o efeito ‘easeInOutExpo’ já esta alocado.


$(function() {
                $('a').bind('click',function(event){
                    var $anchor = $(this);
        
                  $('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top}, 1000,'easeInOutExpo');
					
			// Outras Animações
			// linear, swing, jswing, easeInQuad, easeInCubic, easeInQuart, easeInQuint, easeInSine, easeInExpo, easeInCirc, easeInElastic, easeInBack, easeInBounce, easeOutQuad, easeOutCubic, easeOutQuart, easeOutQuint, easeOutSine, easeOutExpo, easeOutCirc, easeOutElastic, easeOutBack, easeOutBounce, easeInOutQuad, easeInOutCubic, easeInOutQuart, easeInOutQuint, easeInOutSine, easeInOutExpo, easeInOutCirc, easeInOutElastic, easeInOutBack, easeInOutBounce
                  

                });
            });

Para o html você pode seguir esta estrutura, link com a hashtag e o id na sessão onde quer que a página deslize


   
      
      

Pronto é isso! Simples e fácil. Agora você já tem uma navegação em uma única página e com diversos efeitos de deslize para se chegar ao conteúdo.

Comentários
  1. Rodrigo disse:

    Obrigado, Robson. Me ajudou muito!

  2. fernando disse:

    Como fazer com que, o efeito ancora suave aconteça em um link fora da mesma página
    Já que este código é pro ancora suave na mesma página, com efeito descendo de forma suave, mas e para acontecer o mesmo efeito só que com o link direcionando para outra pagina?

  3. Alison disse:

    Olá, boa tarde você teria algum exemplo de ao invés do menu ser horizontal, ele ficar fixo na vertical.
    Já busquei em tantos lugares e não consegui achar um exemplo desse efeito quando o menu é vertical fixo. O que tentei fazer só funciona se a página estiver no topo ‘0’.
    vle

  4. junior disse:

    Cara não fez o efeito, ele rolou direto pra section

  5. Fabio disse:

    Muito obrigado pela ajuda, foi simples e objetivo!

  6. gabriel disse:

    por que desliza direto para a div sem nenhum efeito?

  7. Lucas Andrade disse:

    Cara, Muitoo obrigadooo!!
    Parabéns pelo post. Muito útil..
    Tem muitos por ai que para ensinar algo tão simples dão uma volta ao mundo e deixa as pessoas ainda mais confusas. você soube ser simples e objetivo..
    Parabens, continue assim..
    Grande abraço!

  8. rafael disse:

    cara, pra mim esse código nao funcionou… quer dizer, ele funcionou, mas a página rolou de soco, sem o efeito da animação.

Deixe o seu comentário!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade