Javascript para ir a determinada línea

rodeirojg · #1 (**permalink**) 11/11/2012, 17:14

Hola gente del foro!

Les comento que estoy armando una web que tiene vínculos a determinadas líneas de texto. Sé que eso se hace con un ID, de manera que después el vínculo quedaría <a href="#ID">. El tema es que me gustaría que eso suceda con el efecto que tiene el menú izquierdo de esta página:

http://www.woorank .com/es/www/meristation. com (quiten los espacios en blanco)

Alguien conoce algun Javascript así?

IsaBelM · #2 (**permalink**) 12/11/2012, 06:02

prueba con este

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<script type="text/javascript">
(function(){
var init=function(){
var tags=document.getElementsByTagName('A'),doms=[],intervalo=false,timeout=false,time=80; // en 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);
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>

emprear · #3 (**permalink**) 12/11/2012, 10:54

Podés uitlizar este efecto
http://foros.emprear.com/javascript/scrollsuave/

Saludos

rodeirojg · #4 (**permalink**) 12/11/2012, 10:56

Cita:

Iniciado por IsaBelM

prueba con este

Muchas gracias por tu respuesta IsaBelM!!! El único tema es que no encuentro cual es el error de sintaxis que me arroja en la línea 19. Intenté cambiar algunos caracteres pero no me resultó todavía.

rodeirojg · #5 (**permalink**) 12/11/2012, 10:59

Cita:

Iniciado por emprear

Podés uitlizar este efecto
http://foros.emprear.com/javascript/...rollsuave.html

Saludos

Exactamente, es genial! sería algo casi exactamente como eso pero con un efecto de des-aceleración al aproximarse al objetivo (lo sé, soy muy #%"%$, pero cuando me encariño de algo que veo hasta que no me sale no me quedo conforme)

emprear · #6 (**permalink**) 12/11/2012, 11:14

Bueno, el efecto mas o menos lo hace, lo que sucede que en mi caso puse muchos links, si se hiciese suave desde el 1 al 25 tardaría demasiado, si vas del 10 al 15 el efecto es más suave

Saludos

IsaBelM · #7 (**permalink**) 12/11/2012, 14:30

Cita:

Iniciado por rodeirojg

Muchas gracias por tu respuesta IsaBelM!!! El único tema es que no encuentro cual es el error de sintaxis que me arroja en la línea 19. Intenté cambiar algunos caracteres pero no me resultó todavía.

var id=this.getAttribute('href').split('#')[1],dom=document.getElementById(id),offsetTop=0,offse tLeft=0,elm=dom;

la propiedad es offsetLeft

furoya · #8 (**permalink**) 12/11/2012, 16:27

Claro, no lo encontraba porque no era un error de sintaxis, sino de caprichosa.

Y no es el único. Y no me refiero a todos (o casi todos) tus mensajes con código: ya me estoy refiriendo a éste, que tiene líneas cortadas por todos lados y para probarlo me tuve que poner a corregirlas.

Por otro lado, creo que entiendo un poco lo de la velocidad. Lo que falta es la "amortiguación" a la llegada. Que baje gradualmente hasta detenerse, pero que la disminución empiece unos ... no sé, 100 pixeles antes. Hay un recurso, que es usar funciones trigonométricas para ir reduciendo el tiempo y así parece que se frena de a poco. Está algún ejemplo por ahí.

Yo me acordé de éste, del amigo Panino5001

menu flotante efecto ascensor

IsaBelM · #9 (**permalink**) 13/11/2012, 05:55

la deceleración es sencilla de lograr

sabemos de donde partimos y hasta donde tenemos que llegar

Cita:

var tags=document.getElementsByTagName('A'),doms=[],intervalo=false,timeout=false,time=80, time2=80;

.....

time=time>1?time2:2; // resetea velocidad
deceleracion = offsetTop > actT ? 'down' : 'up';
intervalo=setInterval(function(){

// deceleración progresiva

switch(deceleracion) {
case 'down':
if((offsetTop-300) < actT) time += 2;
break;
case 'up':
if((offsetTop+300) > actT) time += 2;
break;
}

if(actT==offsetTop&&actL==offsetLeft){clearInterva l(intervalo);clearTimeout(timeout);}

rodeirojg · #10 (**permalink**) 13/11/2012, 18:44

Cita:

Iniciado por IsaBelM

la deceleración es sencilla de lograr

sabemos de donde partimos y hasta donde tenemos que llegar

SOS INCREIBLE!!! Yo realmente estoy empezando, sólo sé lo básico en HTML y mi especialidad es el diseño, pero aún sabiendo lo básico puedo decirte que sos una genia! MIL GRACIAS ISABEL!!!!