Desplazarse "volver al principio"

ceaped · #1 (**permalink**) 16/05/2008, 13:39

Buenas tardes.

Hace días visité una Web que tenia algo muy interesante y es que cuando uno iba en cierto punto de la página tenia un botón para devolverse al comienzo. Pero no es el típico botón que sube de un salto sino que este subia armónicamente, como si fuera animada.
Como se hace esto?

Gracias por su ayuda

a2a2 · #2 (**permalink**) 16/05/2008, 15:11

Eso lo puedes hacer con javascript. Necesitas utilizar las funciones siguientes:
- window.scroll(x,y) -> Mueve la pantalla visible para que la coordenada x,y esté situada en la parte superior izquierda
- setTimeout( funcion, tiempo ); -> Para invocar a la "funcion" cada "tiempo" milisegundos.

ceaped · #3 (**permalink**) 16/05/2008, 15:35

Hola a2a2, gracias por tu ayuda.
Me podrías decir como quedaría el script ya que no se mucho de javascript.

Gracias

a2a2 · #4 (**permalink**) 16/05/2008, 16:08

Lo siento, en éste foro se suele ayudar a la gente a resolver dudas y a orientar sobre cómo hacer las cosas, pero NO se le hace el trabajo a los demás.

Puedes intentar ver el código fuente de la web en la que viste ésta funcionalidad y empezar a partir de ahí.

ceaped · #5 (**permalink**) 20/05/2008, 06:27

Alguien que verdaderamente me pueda ayudar.
Sin generar discusiones innecesarias pues mi objetivo es que me ayuden con mi pregunta.

Si yo voy ayudar a un minusvalido a pasar la calle no lo empujo para que el con el impulso la pase...sino que lo paso hasta su destino. Con esto no hice el trabajo por el sino que lo ayude con el pago más grande que hay en la vida y es el de "servir a la gente".
Yo se que en el foro hay gente que de verdad presta ayuda SIN nada a cambio. Sólo esperando ayudar a los demás.

Gracias

Panino5001 · #6 (**permalink**) 20/05/2008, 06:34

Fijate si te sirve:

Código PHP:

  <!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="text/html; charset=iso-8859-1" />

<title>TEST</title>

<script>

function getWindowData(){

    var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal;

    if (typeof window.innerWidth != 'undefined'){

        widthViewport= window.innerWidth;

        heightViewport= window.innerHeight;

    }else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0){

        widthViewport=document.documentElement.clientWidth;

        heightViewport=document.documentElement.clientHeight;

    }else{

        widthViewport= document.getElementsByTagName('body')[0].clientWidth;

        heightViewport=document.getElementsByTagName('body')[0].clientHeight;

    }

    xScroll=self.pageXOffset || (document.documentElement.scrollLeft+document.body.scrollLeft);

    yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);

    widthTotal=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth,widthViewport);

    heightTotal=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,heightViewport);

    return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal];

}

function $(id){

    return document.getElementById(id);

}

function subir(tiempo,rozamiento){

var i=setInterval(function(){

var page=getWindowData();

scrollTo(0,page[3]*rozamiento);

if(page[3]<=0){

scrollTo(0,0);

clearInterval(i);

}

},tiempo);

}

function up(){

    subir(100,.6);

}

</script>

</head>

 
<body>

inicio<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<a href="javascript:up()">subir</a><br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<a href="javascript:up()">fin</a>

</body>

</html>

ceaped · #7 (**permalink**) 20/05/2008, 07:36

Gracias Panino5001. Lo probaré.
Mucha suerte

ceaped · #8 (**permalink**) 20/05/2008, 10:16

Es lo que buscaba. Nuevamente gracias Panino5001 y mucha suerte.

Panino5001 · #9 (**permalink**) 20/05/2008, 10:54

Me alegra que te sirviera.