Scroll por id

php2 · #1 (**permalink**) 30/12/2011, 06:31

Hola,
Me gustaria que cuando hago click en un link de id tipo "#div1" la página no bajase de golpe, si no que tardase un poco más haciendo scroll.
Se puede hacer con javascript ¿no?
¿Me he explicado bien?
Gracias

ryugen · #2 (**permalink**) 30/12/2011, 06:43

podrías animar el scroll utilizando jquery

Código Javascript:

Ver originalfunction scrollTo(selector) {
    var destination = $(selector+':first').offset().top;
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination - 50 }, 1000);
}

o agregar un interval en el on click del link

IsaBelM · #3 (**permalink**) 30/12/2011, 07:20

con puro javascript

Cita:

<html>
<head>
<script type="text/javascript">
(function(){
var init=function(){
var tags=document.getElementsByTagName('*'),doms=[],intervalo=false,timeout=false,time=80; // 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,offse tLeft=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.d ocumentElement.scrollTop:document.body.scrollTop;
var actL=document.documentElement.scrollLeft?document. documentElement.scrollLeft:document.body.scrollLef t;
time=time>1?time:2;
intervalo=setInterval(function(){
if(actT==offsetTop&&actL==offsetLeft){clearInterva l(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(interv alo);},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;
}
})();
</script>
</head>
<body>
<a href="#abajo" id="arriba" rel="easyurl">Abajo</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a href="#arriba" id="abajo" rel="easyurl">Arriba</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>

php2 · #4 (**permalink**) 30/12/2011, 08:27

haciendo esta prueba rapida no funciona:

Código HTML:

Ver original<script>function scrollTo(selector) {
    var destination = $(selector+':first').offset().top;
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination - 50 }, 1000);
}</script>
dsdsfsd
 
<br>
 
<a href="javascript:scrollTo('#uno')">dsff</div></a>
 
 
<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f
<div id="uno">ff<br></div>

ryugen · #5 (**permalink**) 30/12/2011, 08:54

requieres de jQuery como dije antes. Sino puedes disponer de el, puedes utilizar lo que te escribió IsaBelM