Skip to content

Scroll Animado con jQuery

5 junio 2011
tags: ,

En esta entrada vamos a ver cómo emular con jQuery el comportamiento del botón (o enlace) que existe en determinadas webs, que consiste en: Cuando lo pulsas te lleva automáticamente hasta la cabecera de la página actual. Este botón (o enlace) se suele llamar ‘Subir’ o ‘Top’ o algo similar. El objetivo es que cuando la página contiene gran cantidad de información y hemos tenido que hacer Scroll para ir leyéndo, presionemos este botón y directamente nos redirija a la cabecera de la página. Normalmente la redirección es inmediata, es decir, presionas el botón y zas! ya estas arriba. En esta entrada vamos a ver como, con una simple instrucción de jQuery, conseguiremos el mismo efecto, pero mucho más sutil, ya que provocaremos una animación que hará scroll automático en nuestra página, al igual que si hubiéramos hecho el scroll manual. Además podremos seleccionar el elemento de nuestra página web, en el que se dentendrá el scroll en lugar de llegar hasta arriba, lo cual, bajo mi punto de vista, queda mucho más elegante.

Si buscáis cómo hacer esto mismo por Google, veréis que hay un plugin para jQuery que se llama ScrollTo que tiene la misma función que lo que vamos a ver aquí. Mi opinión personal es: Si puedo implementar algo yo mismo, no necesito ninguna librería de terceros que lo haga. Además cuando veáis lo simple que es la instrucción, os daréis cuenta de que no merece la pena importar un plugin o librería sólo para eso.

La instrucción que utilizaremos será la siguiente:

    jQuery('html, body').animate({
               scrollTop: jQuery('#elemento_objetivo').position().top
          },"normal");

Vamos a desglosarla:

  • En primer lugar le estamos diciendo que aplique la animación a los elementos ‘html’ y ‘body’ de nuestra página. He comprobado que es necesario aplicarlo a los dos, ya que hay ciertas versiones de Firefox que lo requieren así.
  • En segundo lugar le estamos diciendo que la animación se va a realizar sobre el atributo scrollTop.
  • El valor que le daremos a scrollTop será la posición Top del elemento hacia el que nos interesa que nuestra página se dirija. Es decir, al hacer scroll automático hacia arriba, en qué elemento queremos que el scroll se detenga.
  • Y por último, la velocidad de la animación: “slow”, “normal” o “fast”.
En mi caso suelo utlizar mucho esta instrucción para la validación de formularios. Hay ocasiones en las que los formularios tienen tantos campos que es imposible que quepan todos en la página de un sólo vistazo y no podemos evitar que aparezca el Scroll. Cuando el usuario hace click en el botón Sumbit del formulario, antes de enviarlo, realizo una validación previa con jQuery y si algún elemento es erróneo, utilizo esta instrucción para desplazar el scroll automáticamente hasta ese elemento. De forma que el elemento queda visible para el usuario y él mismo se ha dado cuenta de que algo está mal porque ha visto que la página se ha desplazado hacia arriba de forma sutil.

Cualquier duda, sugerencia, mejora, … será siempre bien recibida.

PD: Si queréis que vuestra página se dirija siempre hacia arriba del todo en lugar de a un elemento concreto, podéis sustituir ‘#elemento_objetivo’ por ‘body’.😉

4 comentarios leave one →
  1. 27 agosto 2011 15:40

    Buenas! Bueno, tenía una duda que me está matando, y no le encuentro solución. Apenas se nada de código, pero tengo que hacer una página web la cual está maquetada seguida, como si fuese un blog. Cada una de las secciones tiene su propio menú este funciona desplazándose por el lugar, pero el problema es que quiero que no vaya directamente, si no que se vea el movimiento, tanto para subir como para bajar.

    Seguramente será una tontería de cambio en el código que aquí tienes pero, en serio, se muy poquito de código. Maquetar y poco más, y por que maqueto en 960grids.

    Gracias de antemano ^^

    • rekkeb permalink*
      31 agosto 2011 17:20

      Hola Elisa, pues el código que está puesto aquí te sirve perfectamente. Sólo tendrías que hacer un pequeño cambio dependiendo de cómo tengas estructurada la página que estés maquetando.
      Tendrías que saber el ‘id’ del elemento hacia el que debe desplazarse la página y el ‘id’ del elemento que va a provocar que la página se desplace. En lugar de los ‘id’ puedes utilizar cualquier selector CSS que te permita seleccionar el elemento concreto.

      Por ejemplo, como has dicho que cada seccion tiene su propio menu, imagino que cada opción del menú enlazará con una parte de esa sección y al pinchar sobre la opción del menú, te desplazará a ella.

      Podrías poner para cada opción del menú algo asi:

      jQuery(‘#opcionMenu’).click(function(){
      jQuery(‘html, body’).animate({
      scrollTop: jQuery(‘#seccion_A’).position().top
      },”normal”);}
      );

      Para evitar tener que repetir muchas veces este código, lo ideal es ir jugando con los selectores.

  2. romaneduardo permalink
    2 octubre 2012 04:30

    Reblogged this on Román Eduardo.

  3. Jose permalink
    9 febrero 2015 23:06

    Hola gracias por el cdigo es muy util, como puedo hacer para que vaya 20px mas arriba del id objetivo?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: