¿Cómo obtener y configurar la posición actual de desplazamiento de la página web?

121

¿Cómo puedo obtener y configurar la posición actual de desplazamiento de la página web?

Tengo un formulario largo que debe actualizarse en función de las acciones / entradas del usuario. Cuando esto sucede, la página se restablece a la parte superior, lo que es molesto para los usuarios, porque tienen que desplazarse hacia abajo hasta el punto en el que estaban.

Si pudiera capturar la posición de desplazamiento actual (en una entrada oculta) antes de que la página se recargue, podría volver a configurarla después de que se recargue.

javascript html xyz
fuente
¿No es una forma impulsada por AJAX una mejor manera de prevenir esos efectos (y por supuesto proporcionar una alternativa en caso de que XHR no esté disponible)? Las recargas de página harán que la página salte a la parte superior y viceversa, una peculiaridad que puede ser molesta.
Marcel Korpel

Respuestas:

118

Estás buscando la document.documentElement.scrollToppropiedad.

SLaks
fuente
gracias, encontré esto: articles.sitepoint.com/article/javascript-from-scratch/6 y modifiqué el getScrollingPosition()para almacenar los valores en variables ocultas. Luego, en el html de la página actualizada que uso <body onLoad="window.scrollTo(x,y), ¡donde xey son los de los valores ocultos!
xyz
46
Descubro, al menos en Chrome en Ubuntu, que document.documentElement.scrollTopsiempre devuelve 0. document.body.scrollTop, sin embargo, parece funcionar. Un Firefox en Ubuntu, por otro lado, lo contrario es cierto: obtienes 0 con bodyy la cantidad correcta con documentElement. ¿Alguna idea de lo que da?
tobek
12
Esta respuesta no es precisa ya que la scrollToppropiedad no funciona en todos los navegadores. Verifique window.pageXOffsety window.pageYOffsetobtenga mejores resultados.
gyo
135

La respuesta aceptada actualmente es incorrecta; document.documentElement.scrollTopsiempre devuelve 0 en Chrome. Esto se debe a que WebKit se utiliza bodypara realizar un seguimiento del desplazamiento, mientras que Firefox e IE utilizan html.

Para obtener la posición actual, desea:

document.documentElement.scrollTop || document.body.scrollTop

Puede establecer la posición actual en 1000px hacia abajo en la página así:

document.documentElement.scrollTop = document.body.scrollTop = 1000;

O, usando jQuery (¡anímelo mientras lo hace!):

$("html, body").animate({ scrollTop: "1000px" });
tobek
fuente
5
La respuesta de gyo, sugerir window.pageYOffsetes más limpia si está utilizando métodos window.scrollBy()o window.scrollTo().
igorsantos07
32

Existen algunas inconsistencias en la forma en que los navegadores exponen las coordenadas de desplazamiento de la ventana actual. Google Chrome en Mac e iOS parece volver siempre 0cuando se usa document.documentElement.scrollTopo jQuery $(window).scrollTop().

Sin embargo, funciona de forma coherente con:

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset
gyo
fuente
Yo también lo he notado, ¿es un error en Mac e iOS?
Alexander Kim
@AlexanderKim Creo que podría estar relacionado con cómo se interpretan ciertas reglas CSS (como el desbordamiento), y se ha informado que funciona si se verifica scrollTop tanto en el cuerpo como en los elementos html. Sin embargo, para evitar las pruebas y la depuración, siempre confío en el seguro y consistente pageXOffset / pageYOffset.
gyo
1
muchas gracias por la respuesta correcta
Michael Paccione
5

Fui con la solución de almacenamiento local HTML5 ... Todos mis enlaces llaman a una función que establece esto antes de cambiar window.location:

localStorage.topper = document.body.scrollTop;

y cada página tiene esto en el cuerpo onLoad:

  if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper);
  }
Laboratorios AX
fuente
3
Sería más elegante usar setItem () y getItem () de localStorage y en su lugar hacer una copia de seguridad de la posición de desplazamiento en cada clic del enlace, almacenarlo una vez al salir de la página: window.addEventListener ("beforeunload", function () {localStorage. setItem ("scrolly", document.documentElement.scrollTop || document.body.scrollTop);});
StanE