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

129

Estoy construyendo un sitio web que estoy publicando con divs. 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 que la página se desplace hacia arriba al actualizar la página?

Lo que puedo pensar es en algunos JS o jQuery ejecutados en onLoad()función de la página para CONFIGURAR el desplazamiento de las páginas hacia arriba. Pero no sé cómo podría hacer eso.
Una mejor opción sería si hay alguna propiedad o algo para cargar la página con su posición de desplazamiento por defecto (es decir, en la parte superior) que será como cargar la página , en lugar de actualizar la página .

— Luna
fuente

Sorprendentemente, ninguna de las soluciones aquí funcionó para mí, pero esta sí lo hizo: stackoverflow.com/a/11486546/470749

— Ryan

165

Puede hacerlo utilizando el método scrollTop en DOM listo :

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

— Palmadita
fuente

9

No funciona en Safari. Pero esto -> stackoverflow.com/a/18633915/102133 sí.

— Ben

165

Para un simple llano implementación de JavaScript:

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

Expandir fragmento

— ProfNandaa
fuente

1

Esta es la respuesta correcta. La solución jQuery no funciona en todos los casos.

— Harry Stevens

@ Paul12_ - Acabo de probarlo Safari 11.0.3y funciona bien para mí, ¿cuál estás usando?

— ProfNandaa

Esto no funcionó para mí. Tuve que volver de la función onbeforeload para que funcione.

— Iqbal

@Iqbal: ¿qué hiciste return?

— ProfNandaa

1

agregar también document.querySelector('html').style.scrollBehavior = '';puede ser necesario. Si se estableció en smooth, es posible que no llegue a la parte superior antes de que la página se vuelva a cargar.

— kevnk

35

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

Debería usar el beforeunloadevento que le impide formar haciendo algosetTimeout

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

— Ben
fuente

1

Agregar después de la función de desplazamiento: $ ('html'). Text (''); , por lo que se reiniciará el cochecito

— user956584

1

@Userpassword ¿No crees que $ ("html"). Remove () sería mejor?

— Ben

18

Nuevamente, la mejor respuesta es:

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

(eso no es 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 justo antes de la descarga de su página, recordarán 0,0 y ganaron No vuelvas a donde estaba la barra de desplazamiento :)

— xoxel
fuente

@ Paul12_ Safari requiere document.documentElement.scrollToptrabajar. Aunque normalmente uso ambos.

— Graham O'Mahony

9

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

Se vería algo así como

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

— jon3laze
fuente

9

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.

— Ankit
fuente

7

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

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

— Nauphal
fuente

4

<script> location.hash = (location.hash) ? location.hash : " "; </script>

Ponga el script anterior en la <head>etiqueta de su html. ¡No estoy seguro de cómo se comportan las aplicaciones de una sola página! Pero seguro funciona como encanto en las páginas normales.

— harshes53
fuente

4

La respuesta aquí (desplazarse $(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 active este evento, anulando nuestro trabajo.

La mejor respuesta debería ser:

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

— DrPollit0
fuente

3

$(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 usé fue

$(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.

— Daut
fuente

3

Para restablecer la ventana, desplácese hacia arriba, $(window).scrollTop(0)en el evento beforeunload hace los trucos, sin embargo, probé en Chrome 80 que volverá a la ubicación anterior después de la recarga.

Para evitar eso, configure el history.scrollRestorationa "manual".

//Reset scroll top

history.scrollRestoration = "manual";

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

— Alex divirtiéndose
fuente

Esta es la mejor respuesta para mí, funciona en Chrome / Linux

— SNS - Web et Informatique

0

La respuesta supercalifragilisticexpialidocious es:

agregue esto en la parte superior de su archivo js o etiqueta de script

document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

document.body.scrollTop = 0; // For Safari

— Nicobels
fuente