Quizá ya conozcamos que si estamos en una página que tiene distintas secciones se puede ir a través de un menú o enlaces.
... <div id="seccion_1">contenido 1</div> <div id="seccion_2">contenido 2</div> ... <a href="#seccion_1">ir a sección 1</a> <a href="#seccion_2">ir a sección 2</a> ...
La navegación a estos elementos o capas es instantánea. Con jQuery podemos establecer la velocidad con la que se producirá la navegación haciendo un efecto de transición que en muchas ocasiones es visualmente más atractivo.
Lo primero que haremos es importarnos, si no la tenemos ya, nuestra librería de jQuery.
Después para cada elemento que queramos el efecto de animación usaremos este código:
$('a[href=#seccion_1]').click(function (event)
{
event.stopPropagation();
var Position = jQuery('[id="seccion_1"]').offset().top;
jQuery('html, body').animate({ scrollTop: Position }, 1100);
return false;
});
Donde pone 1100 se refiere al tiempo en milisegundos que estará realizando la animación.
Con este valor podemos establecer un scroll lento a secciones de una página.