¿Cómo animar el scroll del navegador al dar clic en una liga o menú? #jquery #javascript

Ver ejemplo.

Para realizar un movimiento del scroll en el navegador de forma animada, vamos a hacer uso de la función anímate de jquery(puedes visitar mi entrada donde hablo a fondo de esta función) y también haremos uso de la función offset para obtener el valor de nuestro elemento destino.

El siguiente código hace posible la animación del scroll de una manera rápida y fácil:

Html


<!-- menu para dar clic -->
    <div style="height:50%; width:120px; position:fixed; top:100px; font-size:20px; background:#000; color:#fff; opacity:.5; padding:10px;">
    	<a href="#opcion1"  class="scroll">Ir a opcion 1</a><br />
        <a href="#opcion2"  class="scroll">Ir a opcion 2</a><br />
        <a href="#opcion3"  class="scroll">Ir a opcion 3</a><br />
        <a href="#opcion4"  class="scroll">Ir a opcion 4</a><br />
        <a href="#opcion5"  class="scroll">Ir a opcion 5</a><br />
        <a href="#opcion6"  class="scroll">Ir a opcion 6</a><br />
    </div>

    <!-- los elementos destino -->
    <div style="height:500px; background:#fff;">
    	<p id="opcion1">Un pato</p>
    </div>
     <div style="height:500px; background:#eee;">
    	<p id="opcion2">Dos pato</p>
    </div>
     <div style="height:500px; background:#ddd;">
    	<p id="opcion3">Tres pato</p>
    </div>
     <div style="height:500px; background:#ccc;">
    	<p id="opcion4">Cuatro pato</p>
    </div>
     <div style="height:500px; background:#bbb;">
    	<p id="opcion5">Cinco pato</p>
    </div>
     <div style="height:500px; background:#aaa;">
    	<p id="opcion6">Seis pato</p>
    </div>

Javascript


$(document).ready(function(){	
  $(".scroll").click(function(event){					 
 //bloqueamos la función del anchor original					 
 event.preventDefault();					 
 //dirigimos de manera animada al id del anchor					 
 $('html,body').animate({											 
 //le indicamos al scroll vertical que se dirija al objeto con el id											 
 //guardado en el anchor a su posición top.											 
 scrollTop:$(this.hash).offset().top											 
 },1000);	
});
});

Ver ejemplo.

Nota: la función offset nos sirve para obtener la posición de un elemento, en este caso el top de elemento respecto a la página.

Autor: Héctor de León

Desarrollador de software, lector compulsivo.