JQuery.ScrollTo , Olvidate de usar anchors aburridos

Categorías: JQuery, Tutoriales - Tags:

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

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
<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

Ver Ejemplo
Descargar Ejemplo

Update: Por si quieren probar otra solución – scroll con jquery sin plugins

Acerca del autor

by

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. Wordpress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

Más Posts de Damián Logghe - Web

Sigueme:
TwitterFacebookLinkedIn

  • http://www.yavendi.com charlescuellar

    amigo muchas gracias me funciono

    • http://twitter.com/id_elias Elías

      Amigos, me está dando un error, si me pudieran ayudar, sería genial…
      Sigo los pasos, ya a la hora de probar, cuando doy clic en un enlace que me debería llevar a un div específico, me salta este error en la consola de chrome. (es un wordpress)

      Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method ‘scrollTo’  

      Quedo atento, muchas gracias anticipadas.

      • masquewordpress

        Eso es que no te cargo el archivo de jquery.scrollTo.js

  • http://www.gerar2k.com.ar Gerar2k

    Exelente info, pero fijate que en el ejemplo de descarga falta el archivo jquery.js =)

    Saludos!

  • Hackroro

    Me sirvio mucho, gracias por el ejemplo.

  • Cristian

    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!

  • Ramón

    Hola muchas gracias . me funciona pero tengo una duda como puedo modificar la posición final del scroolTO?

  • http://www.timersys.com Damian

    Hola Ramón, el div con id #destino es el final del scrollTo . Segun el id que indiques el scroll irá hacia alla

  • Ramón

    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??

  • Ramón

    Estaba leyendo justamente eso pero estoy probando con offset y o no se como agregarlo correctamente o no me funciona

  • Ramón

    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!!!

  • http://huleosdesign.com Julio

    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???

    • http://masquewordpress.com Damian

      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')

    • http://masquewordpress.com Damian

      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')

  • kronenmix

    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? :P

  • juan

    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.

  • http://www.unoentremil.com/ SEO

    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.

  • http://soypizer.blogspot.com Pizer

    Bueno y si quiero que sea horizontal como haria probe con div flotantes peor nada

  • Sergio

    Hola a todos,
    Me a funcionado perfecto solo que me surge una necesidad y no encuentro como hacerlo,
    quiero que al hacer click en el enlace aga el scroll a otra pestaña dentro de la pagina y que esta a su ves se abra con la propiedad click, no se si me explique correctamente.
    Quiro hacer click, que aga el scroll y que aga click en el lugar donde hizo el scroll
    Espero alguien pueda ayudarme, saludos.

  • angelozzz

    como lo hago pa q funcione solo con el id en el link href?

    ej:

    ir a destino

  • http://twitter.com/durabite Alejandro Lerma

    Excelente es lo que andaba buscando! Saludos y bueno tu blog

  • Nameyca

    Muchas gracias! es justo lo que buscaba, le da un toque especial a la web.

  • Chisdavinta

    busco solución, cuando abro pagina msn.com es larga y en cuanto la abro empiezo a bajar y ella me vuelve a tirar hacia arriba al principio porque sigue cargando publicidad, esto tiene solución, que cuando la abro e inmediatamente tiro hacia abajo se quede donde la deje y no se vuelva a subir, gracias, un saludo.

  • Yessenines

    Se puede lograr que haya más divs con id destino pero que el javascript sea incremental? Es decir si tengo varios divs, uno es
    ….. Contenido del div…..
    otro contenido de la web ….. Contenido del div….. otro contenido de la web ….. Contenido del div….. otro contenido de la web ….. Contenido del div…..Y que con el mismo vinculo (con una posición fixed para que estésiempre visible, por ejemplo, antes del pie de página delante detodo el contenido) con ese mismo vinculo ir yendo a los destinosDestino (es decir esto debería tener algun ciclo incremental? cómo se hace, me podrías ayudar?

  • Pingback: Scroll con jQuery sin plugins | WebSign