Empêcher le défilement automatique du navigateur lors de l'actualisation

Question

Si vous allez sur une page a et faites défiler, puis rafraîchissez la page, elle sera rafraîchie à l’endroit où vous l’avez laissée. C’est formidable, mais cela se produit également sur les pages comportant un emplacement d’ancre dans l’URL. Un exemple serait si vous avez cliqué sur un lien http://example.com/post/244#comment5 et que vous avez rafraîchi la page après avoir regardé autour de vous, vous ne seriez pas à l'ancre et la page saute. Y a-t-il un moyen d'éviter cela avec javascript? Donc, peu importe-ce que vous iriez toujours à l'ancre.

Answer 1

Sur Chrome, même si vous forcez scrollTop à 0, il passera après le premier événement de défilement.

Vous devriez lier le parchemin à ceci:

 $(window).on('beforeunload', function() {
    $(window).scrollTop(0);
});
 

Le navigateur est donc dupé à croire que c'était au début avant l'actualisation.

Answer 2

Ok, je ne suis pas sûr que ce soit parfait, mais cela semble plutôt bien fonctionner. Vous devrez peut-être rendre compte de plusieurs autres cas. Fondamentalement, si une ancre est utilisée, nous lions à l'événement de défilement windows. L'idée étant que le premier événement de défilement doit appartenir au repositionnement automatique effectué par le navigateur. Lorsque cela se produit, nous repositionnons nous-mêmes, puis supprimons l'événement lié. Cela évite que les pages suivantes défilent dans le système.

 $(document).ready(function() {
    if (window.location.hash) { 
        //bind to scroll function
        $(document).scroll( function() {
            var hash = window.location.hash
            var hashName = hash.substring(1, hash.length);
            var element;

            //if element has this id then scroll to it
            if ($(hash).length != 0) {
                element = $(hash);
            }
            //catch cases of links that use anchor name
            else if ($('a[name="' + hashName + '"]').length != 0)
            {
                //just use the first one in case there are multiples
                element = $('a[name="' + hashName + '"]:first');
            }

            //if we have a target then go to it
            if (element != undefined) {
                window.scrollTo(0, element.position().top);
            }
            //unbind the scroll event
            $(document).unbind("scroll");
        });
    }

});
 

Answer 3

Tu devrais être capable de.

Au téléchargement, vérifiez si window.location.hash a une valeur. Si tel est le cas, récupérez l'élément avec un identifiant correspondant à la valeur de hachage. Recherchez la position de l'élément (appels récursifs à offsetTop / offsetLeft), puis transmettez ces valeurs à la méthode window.scrollTo (x, y).

Cela devrait faire défiler la page jusqu'à l'élément souhaité.