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.
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…
@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
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