Cómo usar scrollTo en jQuery

La semana pasada tuve mi examen de Interacción Humano-Computadora, donde teníamos que hacer un sitio web con ayuda de jQuery, y pues bueno, todo salió bien excepto porque no pude crear una función scrollTo(); para animar anchors en un sitio web, para que hubiera un deslizamiento cuando baja o sube la página.

Pues como me quedé con las ganas encontré un plugin que nos va a facilitar mucho la tarea de hacer un scroll animada a cualquier parte de nuestro sitio, así que espero les guste el tutorial para usar scrollTo en jQuery.

Nivel: principiantes-Intermedios

Descargar archivos | Ver Demo

HTML

Para este ejemplo vamos a hacer un sitio web rápido, feo pero eficiente en todos sentidos. Lo primero es tener unas capas llamadas contenido 1, contenido 2, etc., esto es para poder identificar y saber a dónde vamos a hacer scroll. Lo segundo que le agregamos a la capa es una clase para darle estilo y que se vea el efecto.

Entonces, si se fijan tenemos una capa al principio al cual llamé “menu” y dentro tiene los links que nos van a ayudar a navegar. Fíjense que ya los links tienen en el enlace la llamada de la función. También noten que ya las demás capas tienen su link para ir al inicio, o sea a la capa de menú.

CSS

Para el CSS no necesitan realmente el que les coloco, lo que hago es sólo darle un ancho, alto y un color de fondo a las capas para que ocupen espacio y el efecto se vea bien, pero si no lo quieren usar no lo usen, es código de prueba.

jQuery

Ahora si, esto es lo más importante del tutorial, lo que tenemos que hacer como siempre, y antes de empezar a programar es insertar los headers o links de las librerías. La librería de scrollTo la pueden descargar del blog del creador, o en el archivo que les pongo al final.

Ahora, como les dije al principio, ya en el HTML le había implementado la función .$scrollTo, la cual va a empezar a desplazarse hacia el destino una vez que haya dado click el usuario. Si hicieron todo bien deberían tener un código como el siguiente:

Como vieron en este tutorial, la implementación de un plugin que hace una tarea específica es muy sencilla, obviamente tiene muchas más funciones, pero aquí ya aprendimos la más básica, y creo que la más útil.