JQuery.ScrollTo , Olvidate de usar anchors aburridos
Publicado en July 18, 2009 by Damian
Hoy 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
<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:
Digamos que el destino seria algo así:
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
Links Sponsors
Tags: jquery.plugin
Categoría: JQuery, Tutoriales
Con tu lector preferido.
Via Email.
Por Twitter.
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/jqueryscrollto.html . 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!!!