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
:
Ver original(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:
Ver original<p><a href="#abajo" id="arriba" rel="easyurl">Abajo
</a></p> <p><a href="#arriba" id="abajo" rel="easyurl">Arriba
</a></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.