Javascript

Scroll suave con jQuery

Las anclas o enlaces dentro de una misma página para posicionar al usuario en una ubicación especifica suele ser bastante útiles, pero el efecto de situarlos de forma instantánea que tienen los navegadores, los hace menos conscientes de como llego ahí.

Una forma sencilla de solucionarlo y mejorar con ello la experiencia del usuario es con jQuery:

Solución sencilla

En el header de la página se agrega el script que hará el efecto:

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

<script type="text/javascript">
$(document).ready(function() {
	$('#arriba').click(function(){ //Id del elemento cliqueable
		$('html, body').animate({scrollTop:0}, 'slow');
		return false;
	});
});
</script>

Y el enlace que envía al usuario arriba es:

<a href='#' id='arriba'>Volver arriba &uarr;</a>

Solución completa

Una solución más completa y personalizada se consigue con plugins como:

Los plugins son más robustos, así que valen la pena solo si hace mucho uso de anclas en una página y estas son claves en la navegación. Recordar que usar estas soluciones con jQuey se justifican si la librería se usa en la solución de otros problemas, de otro modo, una solución basada en javascript "puro" sería más viable.

Deja un comentario

7 Comentarios

  • Información Bitacoras.com…

    Valora en Bitacoras.com: Las anclas o enlaces dentro de una misma página para posicionar al usuario en una ubicación especifica suele ser bastante útiles, pero el efecto de situarlos de forma instantánea que tienen los navegadores, los hace menos……

  • Interesante, pero si quisieramos dicho scroll en cada pos (que es lo verdaderamente útil) como debería colocarse dicho scrip, si fuérais tan amable. De antemano gracias…

  • Saludos.

    Este tipo de programación, por su potencia en la mayoría de navegadores y su veratilidad dínámica en las diferentes plataformas y efectos, va adesbancar a flash. Y casi se agradece, menos complicación para los diseñadores, jejeje. Deu.

    Enorabuena por la web.

  • Esta muy bueno pero como hago para que en lugar de hacer el efecto hacia arriba lo haga hacia abajo al final de la pag

  • Hola, si el desplazamiento a las distintas anclas de la página se hace desde una imagen que se encuentra dentro de una div pa, este código no es válido no? Alguien sabe como lo puedo hacer?
    Muchas gracias