Tutorial: Efecto de scroll suavizado con jQuery

February 3rd, 2010
Tutorial: Efecto de scroll suavizado con jQuery
2 Comments »
Programacion, Tutoriales
  • Delicious

Cuando navegamos en paginas Web con mucho contenido y por ende muy ‘largas’ a veces debemos utilizar anclas, una ancla no es mas que la etiqueta <a> de HTML, ahora bien, esta etiqueta nos sirve para crear un link pero no solamente externos si no también dentro de la misma pagina, en este tutorial aprenderemos que debemos realizar para obtener un scroll suavizado dentro de nuestra pagina Web.

¿Cómo puedo lograr el Scroll suavizado en mi pagina?:

Como les decía arriba, la etiqueta <a> además  de crear links hacia otras paginas nos sirve para crear enlaces en la misma pagina donde esta localizada, por ejemplo, en paginas muy largas; al final de la pagina podemos colocar un enlace para ir a la parte de arriba. Todo esto lo podemos lograr con jQuery

Comencemos con el código:

Paso #1:

Deberás asegurarte de que ya estas llamando al archivo jQuery en tu pagina Web. Si no posees el archivo jQuery; lo puedes descargar desde aquí, o bien puedes copiar y pegar el código de abajo:

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

Paso #2:

Lo siguiente que vamos a hacer es crear un archivo de JavaScript y vas a pegar la siguiente función (creada por Krato):

jQuery(document).ready(function(){
jQuery(‘a[href*=#]‘).click(function() {
var name = jQuery(this).attr(‘href’);
var no = new Array (‘#otro’, ‘#otro’);
var total = no.length;
var velocidad = 2000;
for (i=0;i<=total;i++) {
if(no[i] == name){
return false;
}
}

if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) { var target = jQuery(this.hash); target = target.length && target || jQuery(‘[name=' + this.hash.slice(1) +']‘);

if (target.length) { var targetOffset = target.offset().top; jQuery(‘html,body’) .animate({scrollTop: targetOffset}, velocidad); return false; }} }); });

Deberas guardar el archivo en el directorio donde tengas todos los archivos JavaScript (recomendado) y una vez guardado deberas llamarlo en tu HTML. Puedes copiar y modificar el siguiente codigo:

Esta función es mejor tenerla en un archivo externo para no ensuciar mucho nuestro código HTML.

Paso# 3:

Una vez estamos listos con nuestro código JavaScript podemos pasar a nuestro HTML, para ello vamos a necesitar algún texto falso para hacer que nuestra pagina crezca verticalmente. Puedes generar algún texto falso en este sitio. Una vez que tengas el texto falso deberás agregar:

<a name=”arriba”></a><a href=”#abajo”>Ir Abajo</a>

<p>El texto falso va aquí!</p>

<a name=”abajo”></a><a href=”#arriba”>Ir Arriba</a>

Ejemplo (descargar):

Ir Abajo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ir Arriba

Tags: , , ,

Entradas Relacionadas:

Tutorial: Como animar objetos con jQuery
¿Que es jQuery? jQuery es un framework que nos permite realizar animaciones complejas con muy poco...
 7 reglas de oro para realizar diseños con un toque de actualidad y eficacia
Todos los diseñadotes tenemos etapas en nuestras vidas en las que aprendemos y conocemos mas acerca...
 Megatutorial #1: Diseñando el iPod nano en Adobe Illustrator
Este tutorial corresponde a la serie de 4 megatutoriales dedicados a los productos estrella de Apple....
 Megaturoial #2: Como diseñar una iMac en Illustrator
Este tutorial corresponde a la serie de 4 megatutoriales dedicados a los productos estrella de Apple....

Esta entrada ha sido guardada en Programacion, Tutoriales. Puedes seguir cualquier respuesta o comentario en esta entrada susribiendote a nuestro RSS 2.0 feed. Puedes tambien Dejar una respuesta, o darle seguimiento desde tu propio sitio Web.