Comment obtenir et définir la position de défilement de la page Web actuelle?

121

Comment puis-je obtenir et définir la position de défilement de la page Web actuelle?

J'ai un formulaire long qui doit être actualisé en fonction des actions / entrées de l'utilisateur. Lorsque cela se produit, la page revient tout en haut, ce qui est ennuyeux pour les utilisateurs, car ils doivent faire défiler vers le bas jusqu'au point où ils se trouvaient.

Si je pouvais capturer la position de défilement actuelle (dans une entrée masquée) avant le rechargement de la page, je pourrais la remettre en place après son rechargement.

javascript html

— xyz
source

Un formulaire basé sur AJAX n'est-il pas un meilleur moyen de prévenir ces effets (et bien sûr de fournir une solution de secours au cas où XHR ne serait pas disponible)? Les recharges de page auront la page pour sauter en haut et en arrière, une bizarrerie qui peut être ennuyeuse.

— Marcel Korpel

118

Vous recherchez la document.documentElement.scrollToppropriété.

— SLaks
source

merci, j'ai trouvé ceci: articles.sitepoint.com/article/javascript-from-scratch/6 et modifié le getScrollingPosition()pour stocker les valeurs dans des variables cachées. Puis dans le html de la page rafraîchie que j'utilise <body onLoad="window.scrollTo(x,y), où x et y sont ceux des valeurs des valeurs cachées!

— xyz

46

Je trouve, au moins sur Chrome sur Ubuntu, que cela document.documentElement.scrollToprenvoie toujours 0. document.body.scrollTop, cependant, semble fonctionner. Un Firefox sur Ubuntu, en revanche, l'inverse est vrai: vous obtenez 0 avec bodyet le montant correct avec documentElement. Une idée de ce qui donne?

— tobek

12

Cette réponse n'est pas exacte car la scrollToppropriété ne fonctionne pas sur tous les navigateurs. Vérifiez window.pageXOffsetet window.pageYOffsetpour de meilleurs résultats.

— gyo

135

La réponse actuellement acceptée est incorrecte - document.documentElement.scrollToprenvoie toujours 0 sur Chrome. En effet, WebKit utilise bodypour garder une trace du défilement, alors que Firefox et IE l'utilisent html.

Pour obtenir la position actuelle, vous voulez:

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

Vous pouvez définir la position actuelle sur 1000 pixels en bas de la page comme suit:

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

Ou, en utilisant jQuery (animez-le pendant que vous y êtes!):

$("html, body").animate({ scrollTop: "1000px" });

— tobek
source

5

La réponse de gyo, suggérant window.pageYOffsetest plus propre si vous utilisez des méthodes window.scrollBy()ou window.scrollTo().

— igorsantos07

32

Il existe certaines incohérences dans la façon dont les navigateurs exposent les coordonnées de défilement de la fenêtre actuelle. Google Chrome sur Mac et iOS semble toujours revenir 0lors de l'utilisation de document.documentElement.scrollTopjQuery $(window).scrollTop().

Cependant, cela fonctionne de manière cohérente avec:

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset

— gyo
source

Je l'ai remarqué aussi, est-ce un bug sur Mac et iOS?

— Alexander Kim

@AlexanderKim Je pense que cela pourrait être lié à la façon dont certaines règles CSS (comme le débordement) sont interprétées, et il a été signalé que cela fonctionnait si vous vérifiez scrollTop sur les éléments body et html. Cependant, pour éviter les tests et le débogage, je compte toujours sur la pageXOffset / pageYOffset sûre et cohérente.

— gyo

1

merci beaucoup pour la bonne réponse

— Michael Paccione

5

Je suis allé avec la solution de stockage local HTML5 ... Tous mes liens appellent une fonction qui définit ceci avant de changer window.location:

localStorage.topper = document.body.scrollTop;

et chaque page a ceci dans le onLoad du corps:

  if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper);
  }

— Laboratoires AX
source

3

Il serait plus élégant d'utiliser setItem () et getItem () de localStorage et à la place de sauvegarder la position de défilement à chaque clic de lien, de la stocker une fois en quittant la page: window.addEventListener ("beforeunload", function () {localStorage. setItem ("scrolly", document.documentElement.scrollTop || document.body.scrollTop);});

— StanE