Âncora com efeito animate do Jquery

Um recurso utilizado na maioria dos sites. A âncora redireciona para uma determinada parte da página, aplicar o animate do Jquery deixa o efeito ainda mais rico. É simples implementar uma âncora animada. Veja a seguir o código html de uma página com 3 sessões:

    <ul class="navbar-nav mr-auto"<
          <li class="nav-item"<
            <a class="nav-link" href="#home"<Home</a<
          </li<
          <li class="nav-item"<
            <a class="nav-link" href="#about"<About</a<
          </li<
          <li class="nav-item"<
            <a class="nav-link" href="#contact"<Contact</a<
          </li<
        </ul<        


      <section id="home" class="home">  
    <h1>HOME</h1>  
   </section>  
   <section id="about" class="about">  
    <h1>ABOUT</h1>     
   </section>  
   <section id="contact" class="contact">  
    <h1>Contact</h1>     
   </section>     

As sections Home, About e Contact tem tamanho de 700px e uma cor para diferenciá-las. Cada item da navbar tem o href referente ao id de cada section e já temos a âncora. Veja a seguir o código que aplicar o efeito animate do Jquery na âncora:

 $(function() {   
  $('a').click(function(){  
   $('html, body').animate({  
     scrollTop: $( $(this).attr('href') ).offset().top  
   }, 1500);  
   return false;  
  });   
 });  

Exemplo simples para aplicar nas suas páginas.

DEMO GITHUB