
Menu com Ancora que leva para Sessão
ANTERIOR
Botão Degradê com Css
Postado: 26 de maio de 2021
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
Publicado por: loopnerd
511 Visualizações
Deixe um comentário