JQuery.ScrollTo , Olvidate de usar anchors aburridos
Categories: JQuery, Tutoriales - Tags: jquery.pluginHoy les traigo otro plugin de JQuery que hace la nevagación un poco más facil . Con JQuery.ScrollTo podemos darle movimiento a una ventana o a un anchor por ejemplo. Como el nombre indica básicamente lo que hace es un scroll ( como cuando usamos la ruedita del mouse) tanto en sentido horizontal como vertical o ambos a la vez.
Esto es útil cuando tenemos una página bastante larga y no queremos que los clientes se cansen de ir un lado para otro. Hace unos meses un cliente me pidio una web para mostrar sus productos y queria algo muy sencillo donde todos los productos aparecieran en la página principal. Cuando empeze con la web me di cuenta que tardaba mucho en ir de un lado a otro así que fui poniendo scrolls en diferentes partes de la web para subir al top y despues cree un menu para que haga scroll a los diferentes tipos de productos. Si quieren ver de lo que hablo pueden visitar la web de Photo Momentos.
Para usar este plugin como siempre debemos usar la última versión de JQuery y el plugin JQuery.Scroll
1 2 | <script type="text/javascript" src="js/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.scrollTo.js"></script> |
Para realizar un scroll tan solo debemos crear un link o anchor apuntando al id del elemento destino:
1 | <a href="javascript:$.scrollTo('#destino',800);">Destino</a> |
Digamos que el destino seria algo así:
1 2 | <div id="destino">..... Final de la web.....</div> |
Más simple imposible…
JQuery.ScrollTo tiene un montón más de opciones como duración, funciones callback , etc… pero lo básico ya esta explicado.
Un saludo a todos y dejen comentarios
amigo muchas gracias me funciono
Exelente info, pero fijate que en el ejemplo de descarga falta el archivo jquery.js =)
Saludos!
Me sirvio mucho, gracias por el ejemplo.
Agradecidísimo che! Toda la mañana peleándome con el código y de repente google me trajo hasta este pequeño paraíso de la claridad! Un abrazo!
Hola muchas gracias . me funciona pero tengo una duda como puedo modificar la posición final del scroolTO?
Hola Ramón, el div con id #destino es el final del scrollTo . Segun el id que indiques el scroll irá hacia alla
Gracias Damian por responder. Pero si eso lo entiendo y me lo hace… mi problema es que al darle a una opción de menú con scrollto el div al que estaba apuntando lo posiciona en la posición 0,0 de la pantalla y yo tengo un menú que ocupa unos 200 px de alto y necesito que lo posicione por debajo de este.. como lo podría hacer??
Entiendo, en ese caso hay que agregarle un offset por ej : Destino Tenes la documentación completa en http://flesler.blogspot.com/2007/10/jqueryscrollt… . Saludos!!
Estaba leyendo justamente eso pero estoy probando con offset y o no se como agregarlo correctamente o no me funciona
Vale … por fin!!! ya he averiguado como utilizar correctamente el offset!!! Muy buena la documentación Damian luego posteare como queda la pagina para q la veais.
Muchas gracias!!!
muy bueno solo que tengo el lightbox y al agregar el scrollTO no funciona el lightbox pero esto depende de conde acomode el codigo por ejemple si en orden de arriba hacia abajo pongo primero los scripts de lightbox me funciona el script scrollto, si lo hago alrevez no me funciona pero el lighbox si..tienes alguna idea de por que esto???
Puede que no sea compatible entre ellos. Podes probar como alternativa esto:
jQuery.fn.scrollTo = function(time){
var t = $(this).offset().top;
if(t > 10){t = t – 10}
if(time == 'fast'){time = 400}
if(time == 'medium'){time = 800}
if(time == 'slow'){time = 1200}
if(time == null){time = 1000}
$('html,body').animate({scrollTop: t}, time);
}
Agregas eso en vez de <script type="text/javascript" src="js/jquery.scrollTo.js"></script>
Ahi tendrías la función básica de scroll que la usas así:
$('#menu').scrollTo('fast')
Puede que no sea compatible entre ellos. Podes probar como alternativa esto:
jQuery.fn.scrollTo = function(time){
var t = $(this).offset().top;
if(t > 10){t = t – 10}
if(time == 'fast'){time = 400}
if(time == 'medium'){time = 800}
if(time == 'slow'){time = 1200}
if(time == null){time = 1000}
$('html,body').animate({scrollTop: t}, time);
}
Agregas eso en vez de <script type="text/javascript" src="js/jquery.scrollTo.js"></script>
Ahi tendrías la función básica de scroll que la usas así:
$('#menu').scrollTo('fast')
cuando pulso la primera vez todo ok, la segunda no hace el scroll, se mueve algunos pixels y se queda ahi…
¿estas seguro de que has probado esto bien?
Hola buenas muchas gracias por el tutorial. Solo que no me funciona pues cuando clikeo en destino no me lleva hacia el …final de la web… Porqué? He revisado el codigo mil veces.
Una solución muy elegante para los scroll de página y muy bien explicado.
A ver si soy capaz de hacerlo funcionar en un blog de wordpress de modo que se aplique en todas las páginas.
Un saludo y gracias por la explicación.
Bueno y si quiero que sea horizontal como haria probe con div flotantes peor nada