Ir directamente al contenido de esta página

ScrollTo, versión 2

Hace unos días un usuario nos preguntaba si se podía controlar la velocidad de nuestro script de ScrollTo de forma explícita. En la primera versión no se podía, pero en esta sí.

Al ver el nuevo ejemplo funcionando puede que no se aprecie mucha diferencia, pero hemos modificado el código, que queda de esta manera:


var SC = {
  mov : [1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1],
  ret : 45,
  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);
    var fot = 0;
    function mover(){
      if(fot<SC.mov.length){
        setTimeout(
          function(){
            inc = Math.round((dir*(dis*(SC.mov[fot]/100))));
            o += inc;
            window.scrollTo(0,o);
            fot++;
            mover();
          }
        ,SC.ret); 
      } else {
        window.scrollTo(0,x);
        document.location.href = SC.url+'#'+ID;
        fot = 0;
      }
    }
    mover(); 
  },
  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);
      } 
    }
  } 
}
 

Simplemente hemos sustituido el for que controlaba el bucle de desplazamiento por un setTimeout que lanza la función que reposiciona el documento. La frecuencia con la que se lanza esta última depende de una variable que hemos añadido, ret: cuanto mayor es su valor, el intervalo de lanzamiento de la función que mueve el documento es más amplio, por lo que la animación es más lenta. Eso sí, cuidado con hacerlo demasiado amplio que la imagen parezca que va «a saltos».

El nuevo script pesa 1,36Kb, y 1,06 minimizado.

Esta entrada se publicó el 21 de octubre de 2010, se archivó en , y fue etiquetada como , . Autor: Saúl González Fernández. Hay 1 comentario ›.

Comentarios

  1. Federico dice:

    ¡Ahora sí! ¡Qué bien!
    ¡Muchas gracias!

¿Algún comentario?

* Los campos con un asterisco son necesarios

Últimos proyectos

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