Menu com Ancora que leva para Sessão

Menu com Ancora que leva para Sessão

Neste artigo vamos fazer um menu com ancora quando clicado ele desliza para Sessão pegando o ID da section.

Utilizaremos um script para dar o efeito deslizar nas ancoras

Vamos adicionar o html:

O menu com as ancoras

 <ul>
                
     <li><a href="#home" class="scrollSuave">Home</a></li>
     <li><a href="#sobre" class="scrollSuave">Sobre</a></li>
     <li><a href="#artigos" class="scrollSuave">Artigos</a></li>
     <li><a href="#contato" class="scrollSuave">Contato</a></li>
     <li><a href="#download" class="scrollSuave">Download</a></li>
            
 </ul>


<!--Vamos adicionar as section no html-->

<section id="home">
  
    <h2>Home</h2>

</section>

<section id="sobre">
  
    <h2>Sobre</h2>

</section>

<section id="contato">
  
    <h2>Contato</h2>

</section>

Vamos Adicionar o Script para dar o efeito Deslizante nas sessões.

<script>
  var $doc = $('html, body');
     $('.scrollSuave').click(function() {
        $doc.animate({
            scrollTop:$($.attr(this,'href')).offset().top
        }, 500);        
        return false;
    });
</script>

Veja o codigo Funcionando

Baixar Código Veja Funcionando