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>