Scrooltop que se torne invisible..

lazhen · #1 (**permalink**) 14/10/2011, 22:48

Hola una ves más..

En estos dias estuve buscando y tratando de hacer una flecha que :

Aparesca unicamente cuando se llega al final del foro y que al apretarla te lleve al comienzo, es decir, un scrool top.

En fín, lo que pude hacer es que aparesca y que te lleve para arriba, pero no se bien como lograr que solamente aparesca cuando estes al final de la web y que cuando te lleve al comienzo desaparesca..

Este es mi código hasta ahora :

Código HTML:

#scroll-arriba {
    background: url("http://www.mindgaming.com.ar/host-image/images/arriba.png") no-repeat scroll left top transparent;
    display: none;
    height: 40px;
    opacity: 0.5;
    position: fixed;
    right: 10px;
    top: 10px;
    width: 40px;
}
#scroll-arriba:hover {
    opacity: 0.7;
}

Código HTML:

<a id="scroll-up" onclick="scrollTo(0,0)" style="display: inline;"></a>

si me pudisen tirar una mano para lograr esto se los agradecería mucho.

desde ya muchas gracias.

Panino5001 · #2 (**permalink**) 15/10/2011, 04:18

Probá así (no pude testearlo en explorer):

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=UTF-8" />

<title>Untitled Document</title>

<script type="text/javascript">

onscroll=function(){

    if( (document.documentElement.scrollTop==(document.documentElement.scrollHeight-document.documentElement.clientHeight)) || (document.body.scrollTop==(document.documentElement.scrollHeight-document.documentElement.clientHeight)) ){

        alert(1);    

    }

}

</script>

</head>

 
<body>

top<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 />bottom

</body>

</html>

lazhen · #3 (**permalink**) 15/10/2011, 14:00

Cita:

Iniciado por Panino5001

Probá así (no pude testearlo en explorer):

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=UTF-8" />

<title>Untitled Document</title>

<script type="text/javascript">

onscroll=function(){

    if( (document.documentElement.scrollTop==(document.documentElement.scrollHeight-document.documentElement.clientHeight)) || (document.body.scrollTop==(document.documentElement.scrollHeight-document.documentElement.clientHeight)) ){

        alert(1);    

    }

}

</script>

</head>

 
<body>

top<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 />bottom

</body>

</html>

Segun vi, eso lo que hace es detectar cuando el scrool llega al final de la web y emitir un alert.. pero como enlazo esa funcion con el css de la imagen para aplicarselo ?

pd: en firefox anda, en chrome no

saludos!

Panino5001 · #4 (**permalink**) 16/10/2011, 07:03

Bueno, todo masticado sería así:

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=UTF-8" />

<title>Untitled Document</title>

<style>

#flecha{ background:#F00; bottom:10px; cursor:pointer; display:none; height:50px; position:fixed; right:10px; width:50px;}

</style>

<script type="text/javascript">

onscroll=function(){

    if( (document.documentElement.scrollTop==(document.documentElement.scrollHeight-document.documentElement.clientHeight)) || (document.body.scrollTop==(document.documentElement.scrollHeight-document.documentElement.clientHeight)) ){

        document.getElementById('flecha').style.display='block';    

    }else if(document.getElementById('flecha').style.display=='block'){

        document.getElementById('flecha').style.display='none';

    }

}

function subir(){scrollTo(0,0);}

onload=function(){

    document.getElementById('flecha').onclick=subir;

}

</script>

</head>

 
<body>

<div id="flecha"></div>

top<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 />bottom

</body>

</html>

En Chrome 14.0.835.202 sobre MAC funciona sin problemas (en estos momentos no puedo testearlo en PC).

lazhen · #5 (**permalink**) 17/10/2011, 18:31

Cita:

Iniciado por Panino5001

Bueno, todo masticado sería así:

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=UTF-8" />

<title>Untitled Document</title>

<style>

#flecha{ background:#F00; bottom:10px; cursor:pointer; display:none; height:50px; position:fixed; right:10px; width:50px;}

</style>

<script type="text/javascript">

onscroll=function(){

    if( (document.documentElement.scrollTop==(document.documentElement.scrollHeight-document.documentElement.clientHeight)) || (document.body.scrollTop==(document.documentElement.scrollHeight-document.documentElement.clientHeight)) ){

        document.getElementById('flecha').style.display='block';    

    }else if(document.getElementById('flecha').style.display=='block'){

        document.getElementById('flecha').style.display='none';

    }

}

function subir(){scrollTo(0,0);}

onload=function(){

    document.getElementById('flecha').onclick=subir;

}

</script>

</head>

 
<body>

<div id="flecha"></div>

top<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 />bottom

</body>

</html>

En Chrome 14.0.835.202 sobre MAC funciona sin problemas (en estos momentos no puedo testearlo en PC).

Muchísimas gracias, me funcionó de 10.

no quiero molestár mas ni abusar, pero como podría desacelerar la subida del scrool para que valla un poco mas lento, es decir que no sea tan rapida la subida.

saludos!

Panino5001 · #6 (**permalink**) 17/10/2011, 21:01

Para hacerlo mejpr deberías estudiar un poco: http://www.disegnocentell.com.ar/notas2.php?id=239
Pero una manera sería esta:

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=UTF-8" /> 
<title>Untitled Document</title> 
<style> 
#flecha{ background:#F00; bottom:10px; cursor:pointer; display:none; height:50px; position:fixed; right:10px; width:50px;} 
</style> 
<script type="text/javascript"> 
onscroll=function(){ 
    if( (document.documentElement.scrollTop==(document.documentElement.scrollHeight-document.documentElement.clientHeight)) || (document.body.scrollTop==(document.documentElement.scrollHeight-document.documentElement.clientHeight)) ){ 
        document.getElementById('flecha').style.display='block';     
    }else if(document.getElementById('flecha').style.display=='block'){ 
        document.getElementById('flecha').style.display='none'; 
    } 
} 
function subir(){
    var dist,x;
    dist=x=document.documentElement.scrollHeight-document.documentElement.clientHeight;
    for(var i=0;i<100;i++){
        setTimeout(function(){x-=(dist/100);scrollTo(0,(x));},5*i);
    }
} 
onload=function(){
    var f=document.getElementById('flecha');
    f.onclick=subir;
    f=null;
} 
</script> 
</head> 

<body> 
<div id="flecha"></div> 
top<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 />bottom 
</body> 
</html>

lazhen · #7 (**permalink**) 18/10/2011, 19:35

Cita:

Iniciado por Panino5001

Para hacerlo mejpr deberías estudiar un poco: [url]http://www.disegnocentell.com.ar/notas2.php?id=239[/url]
Pero una manera sería esta:

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=UTF-8" /> 

<title>Untitled Document</title> 

<style> 

#flecha{ background:#F00; bottom:10px; cursor:pointer; display:none; height:50px; position:fixed; right:10px; width:50px;} 

</style> 

<script type="text/javascript"> 

onscroll=function(){ 

    if( (document.documentElement.scrollTop==(document.documentElement.scrollHeight-document.documentElement.clientHeight)) || (document.body.scrollTop==(document.documentElement.scrollHeight-document.documentElement.clientHeight)) ){ 

        document.getElementById('flecha').style.display='block';     

    }else if(document.getElementById('flecha').style.display=='block'){ 

        document.getElementById('flecha').style.display='none'; 

    } 

} 

function subir(){

    var dist,x;

    dist=x=document.documentElement.scrollHeight-document.documentElement.clientHeight;

    for(var i=0;i<100;i++){

        setTimeout(function(){x-=(dist/100);scrollTo(0,(x));},5*i);

    }

} 

onload=function(){

    var f=document.getElementById('flecha');

    f.onclick=subir;

    f=null;

} 

</script> 

</head> 

 
<body> 

<div id="flecha"></div> 

top<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 />bottom 

</body> 

</html>

Una ves más, muchisimas gracias por la ayuda y perdon si exigi mucho XD

pd : recien empeze con javascript y todavia en el manual gigante que tengo no llege a ese tipo de parametros, te agradesco por la info extra.

se podría decir que tema solucionado XD

saludos!