Etiquetas

Desplazamiento dentro de una misma página (Smooth Page Scrolling)

Con unas simples lineas de código en y usando JQuery podemos desarrollar una función que nos permita realizar un desplazamiento suave y animado dentro de una misma página.

Cuando queremos desplazarnos dentro de una misma página existe una forma de hacerlo con etiquetas HTML pero que producen un efecto muy brusco, en cambio con estas simples lineas de código podremos hacer ese scroll suave y controlar su velocidad, a cualquier elemento de nuestra página, ya sea a un DIV, SPAN, IMG, etc... a cualquier etiqueta a la que le añadamos un ID para identificarlo.
Antes de explicar el código, pongo un enlace a un ejemplo de uso de desplazamiento suave en página.


Código para realizarlo:

 1- cargar la librería jquery, en la cabecera de la página.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

2.  Escribir las siguientes funciones ntre las etiquetas <script></script>
2.1 -
function moveTo(pos,velocidad){ $('html, body').animate({scrollTop: pos}, velocidad);}
Esta función es para moverse a una determinada posición de la página expresada en pixels que le pasamos a la función con el parámetro 'pos' ( pos=0 nos moveremos al inicio de la página),el parametro 'velocidad' indicará la velocidad a la que haremos el desplazamiento, a menor valor irá más rápido. También podemos usar las palabras "slow"(lento) o "fast"(rápido).
2.2-
function position(elem){var offset = $('#'+elem).offset();return(offset.top);}
Función que  devuelve la posición de cualquier elemento de nuestra página, para ello hay que darle un valor ID al elemento al crearlo. Por ejemplo
3. Asociar la función 'moveTo()' al eveto 'onclick'  funciones dentro de la etiqueta que deseemos.


<div id="inicio">
<h2 onclick="moveTo(position('abajo'),1000)">Haz click para ir al elemento de la página llamado "abajo"</h2>

Nótese que como no conocemos la posición en pixel del elemento al que nos queremos desplazar y que es necesario en la función 'moveTo(pos,velocidad)' lo que hacemos es pasarle al parametro 'pos' la función 'position(elem)' que calculará la posición en pixels del elemento que le pasemos como argunmento.

4. Ir al inicio de la página.

<div id="abajo">
<h2  onclick="moveTo(0,300);">Haz click para ir al inicio de la página rápido</h2>
<h2  onclick="moveTo(0,3000);">Haz click para ir al inicio de la página Lento</h2></div>

Con este poco código podemos hacer un efecto bastante elegante de desplazamiento a elementos de nuestra web, espero que sea útil.