Javascript : Restaurer le scroll au rechargement d’un écran

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>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *