• +55 86 99818-0416
  • brenomachadodomonte@gmail.com

Animação Deslizante para Âncoras

Animação Deslizante para Âncoras

As âncoras são muito utilizadas, principalmente a criar sites Single Page. Há praticamente uma convenção do uso de uma animação ao clicar nas âncoras que é um efeito deslizante na página. Esta animação é bem simples de ser feita com jQuery.

Para nosso teste, vamos criar uma página HTML com links e seções:

<!DOCTYPE html>
<html>
  <head>
    <title>Animação âncora</title>
    <style type="text/css">
      section {
        height: 800px;
      }
    </style>
  </head>
  <body>
    <a class="scrollLink" href="#secao1">secao1</a>
    <a class="scrollLink" href="#secao2">secao2</a>
    <a class="scrollLink" href="#secao3">secao3</a>
    <a class="scrollLink" href="#secao4">secao4</a>
    <a class="scrollLink" href="#secao5">secao5</a>
    <a class="scrollLink" href="#secao6">secao6</a>

    <section id="secao1" style="background-color: red;"></section>
    <section id="secao2" style="background-color: blue;"></section>
    <section id="secao3" style="background-color: gray;"></section>
    <section id="secao4" style="background-color: green;"></section>
    <section id="secao5" style="background-color: black;"></section>
    <section id="secao6" style="background-color: white;"></section>
  </body>
</html>

 

Devemos notar que todos os links estão com a classe scrollLink. Agora iremos criar o código JS que realizará a animação.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script>
      var $doc = $('html, body');
      $('.scrollLink').click(function() {
          $doc.animate({
              scrollTop: $( $.attr(this, 'href') ).offset().top
          }, 1000);
          return false;
      });
    </script>

Pronto! Agora todas as âncoras com a classe scrollLink ao ser clicada irá realizar uma animação até a seção desejada!

 

 

breno

Deixe sua mensagem