[APORTE] Easy Url

[pato12]

Hola,
Les traigo un codigo javascript para hacer un efecto de anclaje facilmente.
Anda en Firefox (yo lo probe en el 3.0), IE 6 al 8, Opera (lo probe en la vercion 9.25) y Google Chrome. En todos esos andan bien, pero no puede hacerlo andar en IE 5.

Código javascript:

(function(){
    var init=function(){
        var tags=document.getElementsByTagName('*'),doms=[],intervalo=false,timeout=false,time=20; // En este ultimo (time), se define la velocidad.
        for(var i=0;i<tags.length;i++){
            if(tags[i].getAttribute('rel')!=null){
                if(tags[i].getAttribute('rel')=='easyurl'){
                    doms.push(tags[i]);
                }
            }
        }
        for(var i=0;i<doms.length;i++){
            doms[i].onclick=function(){
                var id=this.getAttribute('href').split('#')[1],dom=document.getElementById(id),offsetTop=0,offsetLeft=0,elm=dom;
                while(elm.offsetParent){
                    offsetLeft+=elm.offsetLeft;
                    offsetTop+=elm.offsetTop;
                    elm=elm.offsetParent;
                }
                if(intervalo)clearInterval(intervalo);
                if(timeout)clearTimeout(timeout);
                var actT=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop;
                var actL=document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft;
                time=time>1?time:2;
                intervalo=setInterval(function(){
                    if(actT==offsetTop&&actL==offsetLeft){clearInterval(intervalo);clearTimeout(timeout);}
                    actT=(actT>offsetTop?Math.floor(actT-((actT-offsetTop)/time)):Math.ceil(actT+((offsetTop-actT)/time)));
                    actL=(actL>offsetLeft?Math.floor(actL-((actL-offsetLeft)/time)):Math.ceil(actL+((offsetLeft-actL)/time)));
                    window.scrollTo(actL,actT);
                },1);
                timeout=setTimeout(function(){clearInterval(intervalo);},time*1000); // ESTO ES POR SI SE TRABA, EN UNOS SEGUNDOS LO LIBERAMOS
                return false;
            };
        }
    };
    if(window.addEventListener){
        window.addEventListener('load',init,false);
    }else if(window.attachEvent){
        var f=function(){init.call(window,window.event);};
        window.attachEvent('onload',f);
        window[init.toString()+'load']=f;
    }else{
        window['onload']=init;
    }
})();
 

Ese codigo se lo coloca en el heade y para usarlo, se coloca en un atrubuto llamado "rel" se coloca "easyurl" y listo! ejemplo:

Código html:

<p><a href="#abajo" id="arriba" rel="easyurl">Abajo</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="#arriba" id="abajo" rel="easyurl">Arriba</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
 

En el "href" se pone el id el elemento a anclar (con el # al empiezo).
DEMO: http://halfmusic.com/EasyUrlDemo.html
Gracias
Salu2

EDITO: Modifique el codigo para que ande horizontal y verticalmente. La demo esta con el codigo viejo. Solo lo probe en firefox porque no tengo otro.

[danistrein]

y que puedo decir pato12 esta buenisimo el efecto suerte!
ahora lo boy a usar para la web que te mostre que estoy aciendo

[colote]

Muy lindo !!!

Saludos, Ricardo !!!