Colorseeds

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>