Smooth Scrolling con 2 líneas de jQuery

Smooth Scrolling con 2 líneas de jQuery

Fecha: 03-Abr-2014 | Autor: .
Guardado en: Javascript & jQuery

El smooth scrolling o scroll suave es un efecto agradable a la hora de navegar dentro de la misma página con anclas (<a href=”#ancla”>), y aunque pueda parecer complejo, es muy simple y puedes adaptar el siguiente código de 2 líneas a casi cualquier caso:

?Ver código JAVASCRIPT
1
2
3
4
$('a.scroll').click(function(e){
	e.preventDefault();
	$('html, body').stop().animate({scrollTop: $($(this).attr('href')).offset().top}, 1000);
});

El código anterior utiliza la función de jQuery .animate() para animar el desplazamiento hasta la posición buscada. El valor 1000 son los milisegundos que dura la animación (1 segundo). Y en principio le asigna el script a los enlaces que tengan la class scroll, podemos usar los siguientes selectores para casos más amplios:


¿Por qué este anuncio?
?Ver código JAVASCRIPT
1
2
3
$('a').click(function(e){ ... }); // Para todos los enlaces
$('nav a').click(function(e){ ... }); // Para los enlaces dentro de un menu (<nav>)
$('header a').click(function(e){ ... }); // ... todos los enlaces de la cabecera

Ver demo

Hasta la próxima!


Si te gustó, comparte:
Y si fue de ayuda, puedes comprarme un café:
...ó la cena si quieres! ;)

Etiquetado como: , , , ,


Gravatar

Marcelo


Desarrollador web, trabajando desde Montevideo, Uruguay para todo el mundo. Me especializo en Diseño web, Maquetación HTML5 & CSS3, jQuery y Programación PHP & MySQL, e intento aprender un poco más cada día.

13 comentarios, participa!

  1. Muy bueno el post, muchas gracias por compartirlo, saludos

  2. Pablo

    05. Dic, 2014

    Esta bueno, pero el problema es cuando tienes un link a una pagina externa, que no lo abre.

  3. Marcelo

    05. Dic, 2014

    Hola Pablo, en realidad depende cuál de los ejemplos estés poniendo en práctica, si segmentas por class o contenedor (todos los ejemplos menos el $(‘a’)) puedes dirigir el efecto solo a aquellos links que sepas no son externos ;)

  4. Ricardo

    10. Dic, 2014

    tengo un problema, tengo 4 section diferentes uno bajo en otro, al enlazar #personal, #perfil, #trabajo, #contacto (en ese orden estan ordenados, el efecto funciona bien en #personal y #contacto, pero en #trabajo y #perfil, avanza solo un poco y se para :c

  5. Camilo

    11. Mar, 2015

    Gracias!

  6. José

    06. Abr, 2015

    Gracias ¡Funciona!

  7. Juan/flex

    18. Abr, 2015

    ¡Gracias Marcelo! Funcionando perfecto ;)

  8. stefani sanchez

    12. Jun, 2015

    Muy buen Post gracias me ayudo bastante.

  9. yhoon

    28. Oct, 2015

    hay alguna forma de usar este efecto sin anclas? es decir al usar el scroll del mouse tenga ese efecto de smooth mientras vas bajando , o subiendo?

  10. NightWalkercito

    16. Nov, 2015

    Mil gracias, perfecto!

  11. Analia

    15. Ene, 2016

    ¡Muchas gracias! Me funcionó perfecto :)

  12. David

    08. Jul, 2016

    Excelente, me ayudo mucho, gracias!!!!!

  13. vanessa

    16. Jul, 2017

    gracia me funciono :3

Deja tu opinión