Fuerza la posición de desplazamiento de la página hacia arriba al actualizar la página en HTML

Estoy construyendo un sitio web que estoy publicando con div s. Cuando actualizo la página después de desplazarla a la posición X, la página se carga con la posición de desplazamiento como X.

¿Cómo puedo forzar el desplazamiento de la página hacia arriba en la actualización de la página?

  • Lo que puedo pensar es que JS o jQuery se ejecutan como función onLoad() de la página para SET las páginas se desplazan hacia arriba. Pero no sé cómo podría hacer eso.

  • Una mejor opción sería si hay alguna propiedad o algo para tener la página cargada con su posición de desplazamiento como predeterminada (es decir, en la parte superior), que será algo así como la carga de la página , en lugar de la actualización de la página .

Puedes hacerlo usando el método scrollTop en DOM listo :

 $(document).ready(function(){ $(this).scrollTop(0); }); 

Para una simple implementación simple de JavaScript:

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

La respuesta aquí no funciona para safari, document.ready a menudo se dispara demasiado pronto.

beforeunload usar el evento beforeunload que evita que se forme haciendo un setTimeout

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

También puedes probar

 $(document).ready(function(){ $(window).scrollTop(0); }); 

Si desea desplazarse en la posición x, puede cambiar el valor de 0 a x.

Compruebe la función jQuery .scrollTop() aquí

Se vería algo así como

 $(document).load().scrollTop(0); 

De nuevo, la mejor respuesta es:

window.onbeforeunload = function () { window.scrollTo(0,0);

(Eso es para no jQuery, busque si está buscando el método JQ)

EDITAR: un pequeño error es “onbeforunload” 🙂 Chrome y otros navegadores “recuerdan” la última posición de desplazamiento antes de la descarga, por lo que si establece el valor en 0,0 solo antes de la descarga de su página, recordarán de 0,0 y no se desplazará de vuelta a donde estaba la barra de desplazamiento 🙂

La respuesta aquí (desplazarse en $(document).ready ) no funciona si hay un video en la página. En ese caso, la página se desplaza después de que se dispare este evento, anulando nuestro trabajo.

La mejor respuesta debería ser:

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

En lugar de location.reload() , simplemente use location.href = location.href . No se desplazará a la posición anterior como lo hace location.reload() .

Nota: Esto no se volverá a cargar si hay # en la URL

  

Coloque la secuencia de comandos anterior en la etiqueta de su html. ¡No estoy seguro de cómo se comportan las páginas individuales! Pero seguro funciona como encanto en páginas regulares.

 $(document).ready(function(){ $(window).scrollTop(0); }); 

no funcionó para mí, ya que Google Chrome simplemente se desplazaría hacia abajo una vez que la página terminara de cargarse. Lo que yo usaba era

 $(document).ready(function() { var url = window.location.href; console.log(url); if( url.indexOf('#') < 0 ) { window.location.replace(url + "#"); } else { window.location.replace(url); } }); 

// Esto carga la página con un # al final. Por lo tanto, siempre se cargará en la parte superior.