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.
