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

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

<html>
   <body>
      
      <nav>
         <ul>
            <li><a href="#link1">Link 1</a></li>
            <li><a href="#link2">Link 2</a></li>
            <li><a href="#link3">Link 3</a></li>
            <li><a href="#link4">Link 4</a></li>
         </ul>
      <nav>

      <section id="link1">
         
      </section>

      <section id="link2">
         
      </section>

      <section id="link3">
         
      </section>

      <section id="link4">
         
      </section>

   </body>
</html>

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.





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

16 comentários em “Site Âncora Simples com Efeito Animate do JQuery

  1. Rodrigo 10 de dezembro de 2016 16:03

    Obrigado, Robson. Me ajudou muito!

  2. fernando 9 de agosto de 2016 14:06

    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?

      • Gabriel Soligo 31 de agosto de 2016 22:39

        Estou com o mesmo problema do amigo acima. Meu site é quase todo em apenas 1 pagina, mas tem 1 ou 2 que não são na mesma pagina. No caso colocaria como link no menu o seguinte “http://meusite.com/#ancora” ???

  3. Alison 7 de julho de 2016 17:18

    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

    • Robson Moulin 12 de julho de 2016 11:51

      Olá, exemplo eu não tenho, mas para ele ficar fixo na vertical é simples, você pode fazer isso via CSS usando position:fixed e continuar utilizando a âncora.

  4. junior 21 de setembro de 2015 0:07

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

  5. Fabio 10 de setembro de 2015 16:45

    Muito obrigado pela ajuda, foi simples e objetivo!

  6. gabriel 8 de julho de 2015 6:48

    por que desliza direto para a div sem nenhum efeito?

  7. Lucas Andrade 14 de junho de 2015 14:58

    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 8 de abril de 2015 16:39

    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.

    • Robson Moulin 9 de abril de 2015 17:41

      Muito estranho, funciona perfeitamente, o script deve ficar abaixo da biblioteca.

      • Anderson 28 de maio de 2015 19:51

        Cara, comigo aconteceu o mesmo! sem efeito algum!

        • Robson Moulin 19 de setembro de 2016 15:28

          Isso mesmo, ficou faltando a biblioteca no exemplo, para fazer a animação!!
          Boa colocação! Abraços

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>