Conserver la position de la barre de défilement lors du rechargement de la page

Question

Je souhaite que le contenu de la table revienne à la même position qu'avant la mise à jour de la page plutôt que d'aller en haut du contenu de la table. En d'autres termes, si l'utilisateur fait défiler vers le bas et qu'un bouton déclenche le rechargement d'une page, je souhaite que le contenu de la table revienne à la même position après l'actualisation.

CSS utilisé pour ma table est

#invoice_incomplete {width:850px;height:400px;overflow:auto;} 

Answer 1

Vous pouvez y parvenir en utilisant Javascript. Sur chargement de la page, vous pouvez écrire [si la table a la barre de défilement]

document.getElementById("invoice_incomplete").scrollTop = 200px; // where you want scroll 

ou pour votre écriture toute page,

document.body.scrollTop = 200px; // 

Answer 2

Comme Chinmayee souligne, le défilement est assez simple programmation. L'autre partie est comment enregistrer la position de défilement avant le rechargement.

Je voudrais essayer un gestionnaire de déchargement pour écrire un cookie pour enregistrer la position de défilement en cours (document.getElementById("invoice_incomplete").scrollTop), mais je suppose que décharger est trop tard, et tous les navigateurs réussiront à écrire le cookie. Donc, probablement onbeforeunload est le meilleur événement pour aller avec.

Donc, ce serait quelque chose comme ceci:

window.onbeforeunload = function() { 
    document.cookie = "invoiceScrollPos=" + (document.getElementById('invoice_incomplete').scrollTop) + ";path=/"; 
} 

Puis, après les rechargements de page, lisez la valeur de ce cookie et définir le scrollTop.

Un effet secondaire (probablement) indésirable de cette approche est que si l'utilisateur quitte cette page, puis y revient plus tard dans la même session de navigateur, la position de défilement sera restaurée à ce qu'elle était auparavant. Pour résoudre ce problème, vous pouvez ajouter une date d'expiration au cookie qui est peut-être 1 minute après la création du cookie.