English Português

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.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. JOSUE / Hace 6 años /

      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…

      Responder a JOSUE →
    2. Francisco / Hace 6 años /

      @JOSUE: No creo que sea lo “verdaderamente” útil, pues todos tenemos necesidades distintas, sin embargo, sin duda es una de sus aplicaciones. Curiosamente web designer wall hizo un tutorial sobre lo que buscas:

      ScrollTo Posts With jQuery

      Responder a Francisco →
    3. Cielodetinta / Hace 6 años /

      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.

      Responder a Cielodetinta →
    4. jose / Hace 6 años /

      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

      Responder a jose →
    5. agp / Hace 4 años /

      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

      Responder a agp →
    6. oscar / Hace 3 años /

      VAYA MIERDA, ESCRIBE COSAS INTERESANTES ESTO ESTA MÁS Q NTNDIDO X ALL PUTO DE MIERDA

      Responder a oscar →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad