Scroll suavizado – Smooth scroll

En este entrada vamos a poder ver como crear un scroll suavizado con jQuery. Además es muy sencillo y personalizable. Un scroll suavizado o smooth scroll es una manera de desplazarnos entre los link que apuntan a la misma página (mediante los ids). En una página web normal, si pulsamos sobre un enlace que llama a otra parte de esa web esta carga sin hacerlo de una manera bonita. Mediante este plugin la página se desplazará automaticamente hacia esa id.

Comencemos con el código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
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;
   }}
  });
});
</script>

A primera parece un poco largo pero es que he añadido algunas mejoras. Entre ellas las siguientes:

1. Como veis en la primera linea hay que llamar también a jQuery. Lo volvemos a cargar desde google y ya está
2. Podemos configurar la velocidad: En la liena 8 está la variable velocidad y tan solo tendremos que cambiar la duración. Recordad que son milisegundos por lo que 2000 son 2 segundos.
3. Podemos filtrar las anclas (links que hacen referencia a la misma página) que queramos para que no funcione el efecto sobre ellas. Útil por ejemplo si utiliamos tabs en la misma página o tros plugins que utilizan ids. Para ello tan solo debeis añadir las anclas que no querais en el vector (array) no (linea 6).  Podeis añadir los id que querais por ejemplo :

   var no = new Array ('#uno', '#dos', '#tres', '#cuatro', '#cinco');

   Recodar añadir la almoadilla # antes del nombre.

Y ya está tendreis vuestro scroll suavizado!

Como no, podeis descargaros un ejmplo para ver como funciona. ÉSta vez he creado el estilo en la mísma página.

6 comentarios »

1. Palop says:

   Julio 21st, 2009

   Muy buen ejemplo, gracias, esperamos con ganas mas cosillas.

2. Krato says:

   Julio 21st, 2009

   Gracias Palop!

   Hoy no tengo tiempo pero mañana pondré la segunda parte del Tutorial sobre Crea tu Propio Formulario Validado.

   Espero también poder un grabar un video para que sea más explicativo.

3. William Ramirez says:

   Julio 26th, 2009

   Q tal Krato… ps fijate que  no he encontrado diferencia ni en mi version del core de jQuery , es la misma, ni en otra cosa.. Me imagino que el error sigue siendo mio si. De todas formas esto no me origina error ni nada por la naturaleza del ancla. Saludos desde Nicaragua.

4. Krato says:

   Julio 26th, 2009

   Pásame el código y lo veo. Así me es más fácil saber donde está el error

5. Jatnika says:

   Enero 2nd, 2010

   Thank you for your help!

   rH3uYcBX

6. Tutorial: Efecto de scroll suavizado con jQuery « Manuel Rocha – Diseño Web y Tutoriales Photoshop says:

   Febrero 4th, 2010

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

Canal RSS de los comentarios de la entrada. URL para Trackback

Deja un comentario