df Javascript Smooth Scroll es una pequeña librería que te permitirá agregar un efecto de transición al acceder a los anchor en una página web. Es compatible con la mayoría de navegadores y solo pesa 1024 bytes.
Típicamente al acceder a un anchor, el browser se mueve directamente a la posición del anchor, pero si deseamos aplicarlo un movimiento suave para acceder al anchor esta es la librería que necesitamos.
Como utilizar Smooth Scroll
El uso es muy sencillo, luego de descargar los archivos fuentes desde df_smooth_scroll.zip, luego al momento de crear nuestro html debemos incluir el archivo smooth.pack.js de la siguiente forma:
<script type="text/javascript" src="smooth.pack.js"></script>
Lo siguiente es agregar los anchor de la forma normal es decir no hace falta agregar ningún código adicional para el funcionamiento.
<a href="#footer" name="top">Go To Footer</a> <p> text body </p> <a href="#top" name="footer" >Go To Header</a>
Uniendo estas lineas, obtendremos un resultado muy agradable pues los movimientos son muy suaves lo que facilita el proceso de moverse en la página. Finalmente pueden ver el ejemplo funcionando en df_smooth_scroll.html.
Comentarios Total 5 comentarios
Publicado: 07/06/2009 3:22 am
Hola.
Muy bueno el tutorial, pero no encuentro el archivo JS.
Podrias escribirlo aqui mismo? o enviarmelo a mi mail por favor.
Muchas gracias, saludos
Publicado: 10/07/2009 3:53 pm
para obtener el archivo es este:
http://www.dezinerfolio.com/system/files/df_smooth_scroll.zip
Publicado: 11/07/2009 1:08 pm
ola.. muy buen aporte.. e.. pero keria acerte una pregunta.. se podria bajar la velocidad del scroll ??? x q como estoy viendo baja muy rapido y eso me trae algunos problemas.. :S es posible bajarle la velocidad ? me lo puedes enviar a mi correo ? plisss !! hace tiempo que estoy buscando este script.
gracias!
Publicado: 06/11/2009 4:41 pm
Ese mismo no se puede adaptar para que el scroll sea horizontalmente en ves de vertical,o conoces alguno otro que lo haga?!
Publicado: 24/10/2012 10:50 am
perfecto… solo tengo una pregunta: ¿es posible manipular la velocidad del scroll? note que en Firefox el scroll es muy suave comparandolo con Chrome u otros browsers. Ojo, utilizando la ruedita del raton…
Intente hacerlo utilizando jQuery pero no he logrado conseguirlo… probe algo como:
$(window).scroll(function(){
$(«html, body»).animate({ scrollTop: «300px» }, 100);
});