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 ↑</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.
JOSUE julio 6, 2010 a las 11:25 am
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…
ResponderFrancisco julio 6, 2010 a las 4:40 pm
@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
ResponderCielodetinta julio 7, 2010 a las 2:46 am
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.
Responderjose octubre 3, 2010 a las 5:41 pm
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
Responderagp septiembre 21, 2012 a las 8:28 am
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?
ResponderMuchas gracias
oscar febrero 27, 2014 a las 7:33 pm
VAYA MIERDA, ESCRIBE COSAS INTERESANTES ESTO ESTA MÁS Q NTNDIDO X ALL PUTO DE MIERDA
Responder