Ir directamente al contenido de esta página

ScrollTo en menos de 2Kb

Siguiendo con nuestra iniciativa de replicar efectos de animación populares de JavaScript en menos de 2Kb, creamos un ScrollTo que no depende de ninguna librería.

El efecto

Habrá visto en muchos sitios web —sobre todo en los que consisten en una única página— un efecto que consiste en que al hacer clic en un vínculo interno, el documento se desplaza progresivamente hacia su destino, en lugar de simplemente «saltar» a él. Bien, pues hemos querido crear un script que duplique este comportamiento, para quien no quiera recurrir a un plugin de jQuery o MooTools.

Nuestros requisitos, los de siempre:

El script

Antes de nada, y para los impacientes, un ejemplo funcional. Y ahora el código:


var SC = {
  mov : [1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1],
  url : (document.location.href.split('#'))[0],
  $ : function(id){var elem = document.getElementById(id);return elem;},
  ev : function(x,y,z){(document.addEventListener) ? x.addEventListener(y,z,false) : x.attachEvent('on'+y,z);}, 
  pD : function(x){(x.preventDefault) ? x.preventDefault() : x.returnValue = false;},
  sc : function(e){
    SC.pD(e);
    e.target ? e = e.target : e = e.srcElement;
    e.toString().match('#') ? e = e : e = e.parentNode;
    var o = 0,ID = (e.toString().split('#'))[1],y = SC.$(ID),x = 0,dir = 0,dis = 0,inc = 0;
    window.pageYOffset ? o = window.pageYOffset : o = document.documentElement.scrollTop;
    while(y){x += y.offsetTop;y = y.offsetParent;}
    (x>o) ? dir = 1 : dir = -1;
    dis = Math.abs(x-o);
    for(var i=1;i<SC.mov.length;i++){
      inc = Math.round((dir*(dis*(SC.mov[i]/100))));
      o += inc;
      window.scrollTo(0,o);
    }
    window.scrollTo(0,x);
    document.location.href = SC.url+'#'+ID;
  },
  inicio : function(){
    var vs = document.getElementsByTagName('a');
    for(var i=0;i<vs.length;i++){
      if(vs[i].href.match(SC.url+'#')){
        SC.ev(vs[i],'click',SC.sc);
      }
    }
  }
}
	

Vamos a explicar someramente algunos de los puntos del código:

Ahora, ¿qué es exactamente mov? Es una variable que describe de forma genérica el patrón del movimiento de la animación: establece tanto el número de «fotogramas» en los que se realizará el desplazamiento, como la relación que existe entre ellos. Por ejemplo, mov : [10,10,10,10,10,10,10,10,10,10] daría lugar a una animación de cinco «saltos» de la misma distancia cada uno, con lo que su movimiento sería uniforme. En el valor que le hemos asignado por defecto, la animación consta de 19 fotogramas, y es más lenta al principio y al final para darle cierto efecto de aceleración-frenado que crea un movimiento más natural. Un patrón como [10,9,9,8,8,7,7,6,6,5,5,4,4,3,3,2,2,1,1] daría un moviento consistente sólo en la parte de frenado, y en orden inverso sólo de aceleración —nótese que la suma final siempre tiene que ser 100, puesto que definimos porcentajes de la distancia total del desplazamiento—. Y ya experimentando, [10,8,6,4,2,4,6,8,10,8,6,4,2,4,6,8,4] crearía un movimiento «ondulante». Importante: cuantos más fotogramas se incluyan, más fluido será el movimiento, aunque también se consumirán más recursos del motor de JavaScript del cliente, por lo que hay que hacerlo con moderación.

El script pesa 1,17Kb, y 994 bytes minimizado.

Y, como siempre, el script se entrega «tal cual»…

Esta entrada se publicó el 2 de agosto de 2010, se archivó en , y fue etiquetada como , , . Autor: Saúl González Fernández. Hay 7 comentarios ›.

Comentarios

  1. Federico dice:

    ¡Muy buen script!
    Ahora, ¿hay alguna posibilidad de incrementar o reducir la velocidad del scroll?

  2. Indirectamente sí: si se reduce el número de «fotogramas» de mov, como resultado se aumenta la velocidad, aunque posiblemente el efecto no sea tan fluido.

  3. Federico dice:

    ¡Intenté y nada, sigue siendo muy rápida! Si el sitio no es muy alto, no te das cuenta de que hace scrolldown.
    ¿Alguna otra solución?
    ¡¡¡Gracias!!!

  4. Estamos programando una nueva versión en la que se pueda controlar este parámetro. En cuanto la tengamos lista subiremos una nueva entrada explicándola.

  5. Julio Aliaga dice:

    En primer lugar enhorabuena, por el artículo y el sitio en general.

    Me gustaría saber si para realizar esta función en scroll horizontal es necesarios solamente cambiar los ejes x por el y.

    Muchas gracias de antemano.

    Atentamente,

    Julio Aliaga

  6. Para el desplazamiento, sí, bastaría con invertir los parámetros de window.scrollTo(0,x) a (x,0). No obstante, antes habría que emplear pageXOffset/documentElement.scrollLeft para saber en qué punto del documento se inicia el movimiento, y offsetLeft para el punto de destino.

¿Algún comentario?

* Los campos con un asterisco son necesarios

Últimos proyectos

© Digital Icon, S.L., 2007 – 2017