Foros del Web » Programando para Internet » Javascript »

como detectar que el scroll del navegador está en el top (o casi en el top)

 Estas en el tema de como detectar que el scroll del navegador está en el top (o casi en el top) en el foro de Javascript en Foros del Web. Lo que busco es sencillo: Si no esta en el top que aparezca el boton de "subir". Y cuando lo este que desaparezca....
  #1 (permalink)  
Antiguo 08/07/2012, 03:11
 
Fecha de Ingreso: noviembre-2005
Mensajes: 172
Antigüedad: 18 años, 4 meses
Puntos: 1
como detectar que el scroll del navegador está en el top (o casi en el top)
Lo que busco es sencillo:

Si no esta en el top que aparezca el boton de "subir". Y cuando lo este que desaparezca.
  #2 (permalink)  
Antiguo 08/07/2012, 03:28
 
Fecha de Ingreso: enero-2011
Ubicación: Argentina
Mensajes: 80
Antigüedad: 13 años, 2 meses
Puntos: 12
Respuesta: como detectar que el scroll del navegador está en el top (o casi en el top
Busca en Google jQuery.ScrollTo

Saludos
  #3 (permalink)  
Antiguo 08/07/2012, 04:22
 
Fecha de Ingreso: noviembre-2005
Mensajes: 172
Antigüedad: 18 años, 4 meses
Puntos: 1
Respuesta: como detectar que el scroll del navegador está en el top (o casi en el top
Cita:
Iniciado por MaxDgy Ver Mensaje
Busca en Google jQuery.ScrollTo

Saludos
ok, gracias. Lo encontré, gracias, es asi:

Cita:
$(window).scroll(function(){
if(isScrollBottom()){
$("#botonsubir").css({opacity:0.3});
}
else {
$("#botonsubir").css({opacity:0});
}
});

function isScrollBottom() {
var scrollPosition = $(window).height() + $(window).scrollTop();
return (1500 < scrollPosition);
}
Ahora me ha surgido otro problema. Antes, de tener puesta esta funcion, tenia puesto con CSS que si hacia hover en el boton cambiaba la opacidad a 1. Y ahora no funciona eso, al hacer hover no cambia la opacidad (otras propiedades si que los cambia).
Última edición por congrio7; 08/07/2012 a las 05:41
  #4 (permalink)  
Antiguo 08/07/2012, 12:42
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: como detectar que el scroll del navegador está en el top (o casi en el top
Sí. Esos son los problemas de usar código ajeno. Y más de usarlo sin entender cómo funcionan.
Probablemente sea fácil de arreglar, pero lo cierto es que si no tienes cargada la "librería" desde antes para alguna otra cosa, usar jquery para saber la posición del escroll es un despropósito.
Se puede hacer perfectamente con JS. Y le das el alcance que quieras, como para que apoye o no interfiera con el CSS.

Código: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">

<script type="text/javascript"> 
var altura;

onload = function(){ 
altura = document.body.clientHeight-window.innerHeight;
}

onscroll = function(){ 
	var despl=self.pageYOffset || (document.documentElement.scrollTop + document.body.scrollTop); 

	document.title = despl+" "+altura; 

	if(despl + 50 > altura){ //se puede jugar con el 50
document.getElementById("boton").style.visibility = "visible";
document.body.style.backgroundColor = "lime";}
	else {
document.getElementById("boton").style.visibility = "hidden";
document.body.style.backgroundColor = "white";}
} 
</script> 

<style type="text/css">
#boton {margin-top: 2000px; margin-bottom: 100px; background-color: yellow; 
display: inline-block; opacity: .5; }

#boton:hover {opacity: 1;}
</style>
</head>
<body>
<div name="marca" id="marca">INICIO </div>
<br>
<a href="#marca" id="boton">ARRIBA ↑</a>
</body>
</html>
Este ejemplo está sólo a modo de muestra. Creo que no anda en IE, y el método del ancla para subir la página no es de lo más moderno. Pero insisto, es un ejemplo para mostrar lo ridículo que es meter un yaicuery para algo tan elemental. Los valores se los cambias a tu gusto.

Aunque pensándolo un poco, es raro que te inhabilite el hover. ¿No habrá otro error en alguna parte?.
  #5 (permalink)  
Antiguo 08/07/2012, 23:39
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: como detectar que el scroll del navegador está en el top (o casi en el top
Hay algo de esta historia que no me cierra.
La página en cuestión, cambia el alto de su contenido en forma dinámica?, es decir, puede que se agreguen elementos que la lleven de no tener a tener scroll?
Si este no es el caso, no tiene mucha gracia,
Dicho esto, oportuna la apreciación de @furoya.

Con su aporte(lo hice algo más compatible) más lo que propongo, y si de no usar Jquery se trata, les dejo esto

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>titulo</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. body{
  10. background: #AFAE85;
  11. font-weight: bold;
  12. }
  13. .relleno{
  14. display: none;
  15. }
  16. .b_scroll{
  17. display: none;
  18. }
  19. /*]]>*/
  20. </style>
  21. <script type="text/javascript">
  22. //<![CDATA[
  23. // uso
  24. // scrollSuave('ddd',3000) --> id de la capa,tiempo en milisegundos, si id de capa es 0, va a la coordenada top 0
  25.  
  26. var altura,winH,timerY;
  27. var tags_botones = new Array();
  28. onscroll = function(){ 
  29. altura = document.body.clientHeight-window.innerHeight;
  30. winH = document.documentElement.offsetHeight;
  31. if (document.body && document.body.offsetHeight) {
  32. winH = document.body.offsetHeight;
  33. }
  34. if (document.compatMode=='CSS1Compat' &&
  35. document.documentElement &&
  36. document.documentElement.offsetHeight ) {
  37. winH = document.documentElement.offsetHeight;
  38. }
  39. if (window.innerWidth && window.innerHeight) {
  40. winH = window.innerHeight;
  41. }
  42. if((altura-10) > winH){
  43. tags_botones=document.getElementsByTagName('button');
  44. var i;
  45. for (i=0; i<tags_botones.length; i++) {
  46. if (tags_botones[i].className=='b_scroll') {
  47. tags_botones[i].style.display = 'block';
  48. }
  49. }
  50. }
  51. } // fin onscroll
  52.  
  53. function scrollSuave(capa,tiempo){
  54. var PosObjeto = document.getElementById(capa);
  55. if(capa == 0){
  56. var PosObjeto = document.body;
  57. }
  58. var PosY = 0;
  59. while(PosObjeto) {
  60. PosY += (PosObjeto.offsetTop - PosObjeto.scrollTop + PosObjeto.clientTop);
  61. PosObjeto = PosObjeto.offsetParent;
  62. }
  63. hacerScroll(document.documentElement,PosY, tiempo);   
  64. } // fin scroll suave
  65.  
  66. function hacerScroll(elementoY, destinoY, demora) {
  67. if (demora < 0) return;
  68. var diferencia = destinoY - elementoY.scrollTop;
  69. var pixelsY = diferencia / demora * 10;
  70. timerY= setTimeout(function() {
  71. elementoY.scrollTop = elementoY.scrollTop + pixelsY;
  72. hacerScroll(elementoY, destinoY, demora - 10);
  73. if(elementoY.scrollTop == destinoY){
  74. clearTimeout(timerY);
  75. }
  76.  }, 10);
  77.  } // fin scroll suave
  78.  
  79.  // solo para la demo, genera contenido extra y scroll
  80. var tags_div = new Array();
  81. function rellenar(estado){
  82. tags_div=document.getElementsByTagName('div');
  83. tags_botones=document.getElementsByTagName('button');
  84. var i;
  85. var b;
  86. for (i=0; i<tags_div.length; i++) {
  87. if (tags_div[i].className=='relleno') {
  88. if(estado == 'mostrar'){
  89. tags_div[i].style.display = 'block';
  90. }
  91. if(estado == 'ocultar'){
  92. tags_div[i].style.display = 'none';
  93. for (b=0; b<tags_botones.length; b++) {
  94. if (tags_botones[b].className=='b_scroll') {
  95. tags_botones[b].style.display = 'none';
  96. }
  97. }
  98.  
  99. }
  100. }
  101. }
  102. } // fin rellenar
  103.  
  104. //]]>
  105. </script>
  106. </head>
  107. <body>
  108. <span>top</span>
  109. <form action="#">
  110. <input type="button" onclick="rellenar('mostrar')" value="rellenar" /> <input type="button" onclick="rellenar('ocultar')" value="ocultar" />
  111. </form>
  112. <div class="relleno" style="height: 100px"><!-- relleno alto --></div>
  113. <div id="aaa" style="color: green;">Demo scroll suave. Demo scroll  suave. Demo scroll suave.</div>
  114. <div class="relleno" style="height: 1500px"><!-- relleno alto --></div>
  115. <div id="ddd" style="color: darkred;">Demo scroll suave. Demo scroll  suave. Demo scroll suave.</div>
  116. <div class="relleno" style="height: 800px"><!-- relleno alto --></div>
  117. <button class="b_scroll" onclick="scrollSuave('ddd',3000);">Rojo</button>
  118. <button class="b_scroll" onclick="scrollSuave('aaa',100);">Verde</button>
  119. <button class="b_scroll" onclick="scrollSuave(0,3000);">Top</button>
  120. </body>
  121. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 09/07/2012, 00:31
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 10 meses
Puntos: 834
Respuesta: como detectar que el scroll del navegador está en el top (o casi en el top
Sólo una acotación, si no necesitamos retrocompatibilidad con explorer 6 (ciertamente, ya basta de Explorer 6!), para obtener las medidas del viewport no necesitamos tanto código. Un ejemplo con el alto del viewport válido en Explorer 7,8,9, en Ópera, Firefox, Chrome y Safari:
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>Documento sin título</title>
<style>*{margin:0; padding:0;}</style>
</head>

<body>
<div id="a" style="background:red"></div>
<script type="text/javascript">
document.getElementById('a').style.height=document.documentElement.clientHeight+'px';
</script>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
aaaa
</body>
</html> 
  #7 (permalink)  
Antiguo 09/07/2012, 04:51
 
Fecha de Ingreso: noviembre-2005
Mensajes: 172
Antigüedad: 18 años, 4 meses
Puntos: 1
Respuesta: como detectar que el scroll del navegador está en el top (o casi en el top
Muchas gracias a todos!.


Cita:
Iniciado por furoya Ver Mensaje
Sí. Esos son los problemas de usar código ajeno. Y más de usarlo sin entender cómo funcionan.
Probablemente sea fácil de arreglar, pero lo cierto es que si no tienes cargada la "librería" desde antes para alguna otra cosa, usar jquery para saber la posición del escroll es un despropósito.
Se puede hacer perfectamente con JS. Y le das el alcance que quieras, como para que apoye o no interfiera con el CSS.

Código: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">

<script type="text/javascript"> 
var altura;

onload = function(){ 
altura = document.body.clientHeight-window.innerHeight;
}

onscroll = function(){ 
	var despl=self.pageYOffset || (document.documentElement.scrollTop + document.body.scrollTop); 

	document.title = despl+" "+altura; 

	if(despl + 50 > altura){ //se puede jugar con el 50
document.getElementById("boton").style.visibility = "visible";
document.body.style.backgroundColor = "lime";}
	else {
document.getElementById("boton").style.visibility = "hidden";
document.body.style.backgroundColor = "white";}
} 
</script> 

<style type="text/css">
#boton {margin-top: 2000px; margin-bottom: 100px; background-color: yellow; 
display: inline-block; opacity: .5; }

#boton:hover {opacity: 1;}
</style>
</head>
<body>
<div name="marca" id="marca">INICIO </div>
<br>
<a href="#marca" id="boton">ARRIBA ↑</a>
</body>
</html>
Este ejemplo está sólo a modo de muestra. Creo que no anda en IE, y el método del ancla para subir la página no es de lo más moderno. Pero insisto, es un ejemplo para mostrar lo ridículo que es meter un yaicuery para algo tan elemental. Los valores se los cambias a tu gusto.

Aunque pensándolo un poco, es raro que te inhabilite el hover. ¿No habrá otro error en alguna parte?.
Este lo he probado (una pequeña modificacion) y va bien, pero le pasa lo mismo. Cuando esta visible no varia al ocurrir el hover.

Cita:
<script type="text/javascript">
// JS particular de cada pagina


onscroll = function(){
var despl=self.pageYOffset || (document.documentElement.scrollTop + document.body.scrollTop);



if(despl > 2000){ //se puede jugar con el 50
document.getElementById("totop").style.opacity = "0.3";
}
else {
document.getElementById("totop").style.opacity = "0";
}
}
</script>

El estilo del #totop es este por cierto:
Cita:
#totop{
position:fixed;
top:0.7em;
right:1.3em;
width:40px;
text-align:right;
font-size:11px;
opacity:0.3;
-webkit-transition:opacity 0.2s ease;
-moz-transition:opacity 0.2s ease;
-o-transition:opacity 0.2s ease;
transition:opacity 0.2s ease;
}

#totop:hover{
opacity:1;
-webkit-transition:opacity 1s ease;
-moz-transition:opacity 1s ease;
-o-transition:opacity 1s ease;
transition:opacity 1s ease;
}
  #8 (permalink)  
Antiguo 09/07/2012, 09:56
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: como detectar que el scroll del navegador está en el top (o casi en el top
Cita:
Iniciado por emprear Ver Mensaje
Con su aporte(lo hice algo más compatible) más lo que propongo, y si de no usar Jquery se trata, les dejo esto
Un lujo que se desplace lentamente. Aunque en Chrome no me anda.
Y lo de no usar yaicuery es obvio. Para esto ni se justifica.


Cita:
Iniciado por Panino5001 Ver Mensaje
Sólo una acotación, si no necesitamos retrocompatibilidad con explorer 6 (ciertamente, ya basta de Explorer 6!), para obtener las medidas del viewport no necesitamos tanto código. Un ejemplo con el alto del viewport válido en Explorer 7,8,9, en Ópera, Firefox, Chrome y Safari
Lo de IE6 hay bastante gente que lo está reclamando en varios temas. Qué sé yo, puede que para alguien sea necesario. Recordemos que IExplorer no es un producto como los otros navegadores, y no siempre es posible actualizarlo. De hecho, la última versión no se puede instalar en un XP. Y ya sabemos que hay un montón de máquinas que aún usan XP.
De todas formas, si me agarran de buen humor puede que algún ejemplo lo haga compatible, de otra forma, que lo adapte quien lo necesita. (En la mayoría de los casos, le pagan para eso. )

El clientHeight no me anda en FF, Op y Chr. En IE no lo probé, pero recuerdo que hace lo mismo : me toma la altura del alto visible, el del panel para el documento, no la altura del documento completa. congrio7 necesita eso para saber cuándo llega al final.


Cita:
Iniciado por congrio7 Ver Mensaje
Este lo he probado (una pequeña modificacion) y va bien, pero le pasa lo mismo. Cuando esta visible no varia al ocurrir el hover.
Como en este tema participan un par de amigos, no lo quiero arruinar; pero no sabes las ganas que tengo de mencionarte unas cuantas cosas.

Vamos a respirar hondo, decir oommmm, y seguimos.

¿Te das cuenta de que tu problema no es el hover, sino la animación CSS, verdad?
¿Y de que esa animación necesita valores explícitos para hacer los cálculos de transición?

... ¿Y de que le estás pisando esos valores con el javascript? ¿Eh?

Que le des opacidad en el JS no tiene sentido. Lo que te interesa es que cuando el escrol llegue a cierto punto, el botón aparezca. Y eso se hace con visibility, que ya no arruina los cálculos del CSS-Script.

Justo hace unas horas puse un ejemplo sobre eso. Y una forma ... incalificable de hacer las combinaciones dinámicas entre ambos métodos.

Porque seamos realistas : o uno, o el otro. Si CSS no permite (aún) medir elementos de la página y aprovechar esos valores, toda la animación se hace a javascript. Que para eso sirve.

Cómo calculo height de un div y se lo pongo al css?



P.D.: y lo de "totop" me genera cierto escozor. ¿Qué el Foro no enmascaraba este tipo de palabras?
  #9 (permalink)  
Antiguo 09/07/2012, 10:11
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 10 meses
Puntos: 834
Respuesta: como detectar que el scroll del navegador está en el top (o casi en el top
Cita:
El clientHeight no me anda en FF, Op y Chr. En IE no lo probé, pero recuerdo que hace lo mismo : me toma la altura del alto visible, el del panel para el documento, no la altura del documento completa
Justamente me refiero a esa altura cuando hablo de viewport: la de la porción visible de la página. ¿Eso es lo que ves en todos los navegadores modernos, no?
Normalmente es lo que se usa en los scripts de paginación infinita (esos que muestran nuevos resultados cuando uno mueve el scroll hacia abajo y supera ese tope)
Última edición por Panino5001; 09/07/2012 a las 10:47
  #10 (permalink)  
Antiguo 09/07/2012, 10:28
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: como detectar que el scroll del navegador está en el top (o casi en el top
@furoya
Cita:
Aunque en Chrome no me anda.
Si ya había tomado nota, de ahí que había mencionado
Cita:
lo hice algo más compatible
pero no del todo....

Los WebKit tienen un mambo con el scroollTop

Working in progress...


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #11 (permalink)  
Antiguo 09/07/2012, 15:18
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: como detectar que el scroll del navegador está en el top (o casi en el top
Cita:
Iniciado por Panino5001 Ver Mensaje
Normalmente es lo que se usa en los scripts de paginación infinita (esos que muestran nuevos resultados cuando uno mueve el scroll hacia abajo y supera ese tope)
Odio la paginación infinita.
En realidad, lo que odio es no saber dónde termina la página. En una común y corriente, con una mirada al gráfico proporcional de las scrollbars ya sé por qué parte del documento estoy.
Pero tengo que admitir que es un buen invento.


Cita:
Iniciado por emprear Ver Mensaje
Los WebKit tienen un mambo con el scroollTop
Ahora recuerdo que yo también tuve problemas con un navegador, y creo que fue Chrome. No me estoy seguro si al final terminé moviendo el margen de una capa, o algo parecido.


De cualquier forma, vuelvo para hacer un comentario sobre algo que recién descubro

congrio7, te pidieron que reportaras el tema, no que lo duplicaras

como detectar que el scroll del navegador está en el top (o casi en el top)
  #12 (permalink)  
Antiguo 10/07/2012, 12:04
 
Fecha de Ingreso: noviembre-2005
Mensajes: 172
Antigüedad: 18 años, 4 meses
Puntos: 1
Respuesta: como detectar que el scroll del navegador está en el top (o casi en el top
Cita:
Iniciado por furoya Ver Mensaje
... ¿Y de que le estás pisando esos valores con el javascript? ¿Eh?

Que le des opacidad en el JS no tiene sentido. Lo que te interesa es que cuando el escrol llegue a cierto punto, el botón aparezca. Y eso se hace con visibility, que ya no arruina los cálculos del CSS-Script.

Justo hace unas horas puse un ejemplo sobre eso. Y una forma ... incalificable de hacer las combinaciones dinámicas entre ambos métodos.

Porque seamos realistas : o uno, o el otro. Si CSS no permite (aún) medir elementos de la página y aprovechar esos valores, toda la animación se hace a javascript. Que para eso sirve.

Cómo calculo height de un div y se lo pongo al css?



P.D.: y lo de "totop" me genera cierto escozor. ¿Qué el Foro no enmascaraba este tipo de palabras?
funciona, muchas gracias. Lo que me gustaria ahora es que ese visibility fuese gradual, que no aparezca de golpe.
  #13 (permalink)  
Antiguo 10/07/2012, 18:31
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: como detectar que el scroll del navegador está en el top (o casi en el top
Bueno, cuando lo tengas hecho, nos avisas.

Etiquetas: navegador, scroll, top, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 05:07.