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:
- Como veis en la primera linea hay que llamar también a jQuery. Lo volvemos a cargar desde google y ya está
- 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.
- 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.
26 comentarios »
RSS feed para los comentarios de esta entrada. TrackBack URL
Deja un comentario
links útiles
Muy buen ejemplo, gracias, esperamos con ganas mas cosillas.
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.
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.
Pásame el código y lo veo. Así me es más fácil saber donde está el error
Thank you for your help!
rH3uYcBX
[...] Lo siguiente que vamos a hacer es crear un archivo de JavaScript y vas a pegar la siguiente función (creada por Krato): [...]
Muchas Gracias, me ha sido de mucha utilidad, llevaba tiempo queriendo conseguir este efecto sin éxito.Gracias!
Mira el enlace no sirve me retorna a el inicio de sesion en WP
[...] 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 = [...]
Tu post me ha resuelto un problema con el que llevaba días trabajando.Muchas gracias!!!!
Terrific paintings! That may be the type of details that are meant to be shared about the net. Shame on the seek for no longer positioning this publish higher! Come on more than and consult with my site . Thank you =)
Podría estar bien que ponga algo sobre esto en mi pequeño blog personal , si he puesto una referencia a esta página?
Estoy impresionado de leer una historia tan poderosa sobre 2kBlog.net – Tutoriales web 2.0 – Scroll suavizado – Smooth scroll. Voy a publicar un enlace en mi página de cupones de este blog. Volveré a leer más.
¿Cómo puedo combinar mi amor por las artes , la escritura creativa , especialmente con el título de abogado ? У
Con la cantidad de dinero que se gasta en la adicción se podría pensar que habría una cura. Sólo el tiempo perdido en el trabajo debe ser suficiente para hacer que esta cosa fija. drogas adicciones
Excelente información real se pueden encontrar en el sitio web.
vale la pena leer. Me pareció muy informativo 2kblog.net como he estado investigando mucho últimamente sobre cuestiones prácticas tales como hablar acerca de ┘
Hola 2kblog.net. Encontré su sitio web a través de Google en la búsqueda de una cuestión similar, su sitio web tiene aquí arriba. Parece bueno. He marcado en mis favoritos de Google para volver más tarde.
Solo para decirte que me ahorraste un dia de trabajo gracias a este tutorial, los demas que habia leido contenian demaciados codigos y el tuyo pues me ahora bastante la carga.Gracias por compartir el tutorial.
And I was just wonedrnig about that too!
An exciting word is worth observe. I imagine that you should correspond author on this theme, it mightiness not be a bias theme but generally people are not enough to utter on specified topics. To the next. Cheers like your 2kBlog.net – Tutoriales web 2.0 – Scroll suavizado – Smooth scroll.
An unputdownable communicating is worth note. I believe that you should correspond many on this topic, it strength not be a preconception thing but mostly fill are not enough to utter on such topics. To the succeeding. Cheers like your 2kBlog.net – Tutoriales web 2.0 – Scroll suavizado – Smooth scroll.
An interesting discourse is worth scuttlebutt. I suppose that you should create author on this message, it power not be a preconception bailiwick but mostly group are not sufficiency to speak on specified topics. To the next. Cheers like your 2kBlog.net – Tutoriales web 2.0 – Scroll suavizado – Smooth scroll.
An absorbing treatment is couturier scuttlebutt. I suppose that you should make much on this subject, it power not be a prejudice subject but generally fill are not sufficiency to talk on specified topics. To the next. Cheers like your 2kBlog.net – Tutoriales web 2.0 – Scroll suavizado – Smooth scroll.
An engrossing discourse is worth annotate. I conceive that you should make many on this message, it might not be a bias soul but mostly people are not enough to utter on specified topics. To the next. Cheers like your 2kBlog.net – Tutoriales web 2.0 – Scroll suavizado – Smooth scroll.
2kBlog.net – Tutoriales web 2.0 – Scroll suavizado – Smooth scroll I was suggested this website by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my problem. You are incredible! Thanks! your article about 2kBlog.net – Tutoriales web 2.0 – Scroll suavizado – Smooth scrollBest Regards SchaadAndy