2012-03-04 17 views
11

Me he dado cuenta de que si está en una página y ha desplazado un poco hacia abajo, si actualiza la página, la mayoría de los navegadores lo llevarán de vuelta a su posición. hay alguna forma de prevenir esto?Prevenir Refrescar 'Saltar' con Javascript

He observado dos opciones y ninguna de ellas es coherente en Webkit/Firefox.

window.scrollTo(0, 1); 
    $('html, body').animate({ scrollTop: 0 }, 0); 

¿Alguna idea?

Puede consultar el resultado de una búsqueda en google para ver un ejemplo.

+0

Esto es lo contrario de lo que la gente por lo general quieren. Sin embargo, si simplemente agrega un hash '#' al final de la URL, saltará a la parte superior al actualizar, de forma predeterminada. – Sparky

+4

@minitech Lo leí como al OP que desea evitar que el navegador regrese a la posición de desplazamiento anterior como sugiere Sparky672, y en su lugar regresa a la parte superior. –

+0

@minitech: En realidad, la pregunta es cómo evitar el desplazamiento. –

Respuesta

6

No veo ninguna razón por la que esto no debería funcionar en todos los navegadores, parece funcionar para mí (con solo una función para window.onload, use más y podría haber problemas)?

window.onload = function() { 
    scrollTo(0,0); 
} 

para que funcione cuando se hace clic en el botón de regreso aswell, tal vez algo como esto:

<body onunload=""> 
<script type="text/javascript"> 
    window.onload = function() { 
     scrollTo(0,0); 
    } 
</script> 
//content here 
</body> 
+0

¿Qué es eso vacío 'onunload =" "' haciendo allí? – Sparky

+0

La onunload es para el bfcache –

1

Algo parecido a continuación funciona para mí, crear algún elemento que se puede enfocar y enfocarla para desplazarse página .

En este caso, se desplazará de nuevo a la parte superior después de actualizar la página.

Probado en la última IE/FF/Chrome.

<html> 
    <head> 
     <script type="text/javascript"> 
      window.onload = function() { 
       setTimeout (function() { 
        // use both 'a' and 'button' because 'a' not work as expected on some browsers 
        document.getElementById('top_anchor').focus(); 
        document.getElementById('top_anchor_btn').focus(); 
       }, 0); 
      } 
     </script> 
    </head> 
    <body> 
     <a id="top_anchor" href="" style="width: 1px; height: 1px; position: absolute; top: 0px; left: -1000px;"></a> 
     <button id="top_anchor_btn" href="" style="width: 1px; height: 1px; position: absolute; top: 0px; left: -1000px;"></button> 

     <div> top </div> 
     <div style="width: 500px; height: 2000px; background-color: #83FEBC;"> 
      content 
     </div> 
    </body> 
</html> 

Saludos,

Ben

+0

Uh, ¿por qué el setTimeout()? – AlanFoster

+1

Solo asegúrate de hacerlo más tarde, Chrome lo necesita. – benbai123

13

funciona para mí:

// Scroll top bro 
window.onload = function() { 
setTimeout (function() { 
    scrollTo(0,0); 
}, 0); 
} 
+0

¡Funciona para uno de mis proyectos! Muchas gracias hombre ! – Simon

+3

Esta es una mejor respuesta. El setTimeout ayuda a capturar condiciones de carrera incómodas con algunos navegadores que activan el desplazamiento de desplazamiento después del evento window.onload. – tohster

+0

de acuerdo, esta respuesta fue la que realmente funcionó para mí. Safari 6.1.1 en Mac ejecutaría primero mi código scrollTo, luego saltaría a la posición anterior después de cargar la página. haciendo esto ganó la carrera. – jammypeach

11

En Chrome, incluso si se fuerza a 0 scrollTop saltará después, tras el primer evento de desplazamiento.

Debe enlazar el desplazamiento para esto:

$(window).on('beforeunload', function() { 
    $(window).scrollTop(0); 
}); 

lo que el navegador es engañado para creer que estaba en el principio antes de la actualización.

0

Sólo para actualizar lo @josetapadas Dicho esto, para las versiones recientes, sería mejor utilizar la función en lugar de beforeunloadunload esto será

$(window).on('unload', function() { 
$(window).scrollTop(0); 
}); 
Cuestiones relacionadas