Ca remonte tout le temps ! Comment garder une page dans son état initial lors d’un « postback » ?
Article inspiré de cette page de forum.
Lors d’un postback d’une page, le scroll revient toujours à sa position initiale… Si on était situé en bas de page, il faut donc re-« moletter » jusqu’en bas. C’est très désagréable.
Voici donc un bout de javascript qui fonctionne de la façon suivant :
- On enregistre (dans un champ caché, hidden) la position de l’écran sur certains « onchange » de contrôles.
- La page se recharge
- On récupère la valeur cachée, qu’on applique dès le window.onload…
Du coup la page revient à sa position initiale !
Fonction à appeler à chaque fois qu’un contrôle gagne le focus, ou voit sa valeur changer, etc :
function SaveScroll() { oHidden = document.getElementById("hdScrollPosition"); if (oHidden) { var sScroll; // Test navigateur if (document.documentElement && document.documentElement.scrollTop) { sScroll = document.documentElement.scrollTop; } else if (document.body) { sScroll = document.body.scrollTop; } else { sScroll = 0; } oHidden.value = sScroll; } }
Fonction à appeler sur le onload de la page :
function RestoreScroll() { oHidden = document.getElementById("hdScrollPosition"); if (oHidden) { var sScroll = oHidden.value; if (sScroll > 0) { if (document.documentElement && document.documentElement.scrollTop) { document.documentElement.scrollTop = sScroll;} else if (document.body) { if (window.navigator.appName == ’Netscape’) { window.scroll(0, sScroll); } else { // Restauration du scroll document.body.scrollTop = sScroll; // Cas ASP.NET : si la page en question est incluse dans une masterpage : // document.body.parentElement.scrollTop = sScroll; } } else { window.scroll(0, sScroll); } } oHidden.value = 0; } }
Maintenant, il suffit d’ajouter dans les pages :
- Le contrôle caché qui sauve la position :
<input id="Hidden1" type="hidden" />
- La restauration du scroll au chargement de la page :
<script type="text/javascript" language="javascript"> window.onload = RestoreScroll(); </script>