Curso de Design Responsivo Aula 18 Criando scroll suave em links âncora

Nessa vídeo aula vamos aprender como criar um efeito de rolagem suave em nossos links âncora fazendo-os rolar suavemente para seu destino ao invés de saltar instantaneamente. Muitos sites têm utilizado o recurso de rolagem suave com jQuery. O código é bem simples e o efeito, sofisticado.

Para chamar o efeito de rolagem suave em um link, você deve chamar a classe scrollSuave definida no código jQuery.

Exemplos de links chamando o efeito de rolagem suave, não esquecer de que o destino deve ter a id igual ao link.

<ul>
     <li><a href="#galeria" class="scrollSuave" title="Galeria">Galeria</a></li>
     <li><a href="#castrar" class="scrollSuave" title="Castração">Castração</a></li>
     <li><a href="#denuncie" class="scrollSuave" title="Denuncie">Denuncie</a></li>
     <li><a href="#conselhos" class="scrollSuave" title="Conselhos">Conselhos</a></li>
</ul>

Código para o scroll suave   

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

 



Hospedagem Profissional de Sites