web-dev-qa-db-fra.com

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

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 actualisé la page après avoir regardé autour de vous ne serait pas à l'ancre et la page saute autour. Y a-t-il un moyen d'éviter cela avec javascript? Donc, peu importe-ce que vous iriez toujours à l'ancre.

javascriptbrowser
86
ThomasReggi

Cette solution n'est plus recommandée en raison de changements dans le comportement du navigateur. Voir d'autres réponses.

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 effectuons notre propre repositionnement, 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");
        });
    }

});
16
mrtsherman

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.

142
josetapadas

Pour désactiver la restauration de défilement automatique, ajoutez simplement cette balise à la section head.

<script>history.scrollRestoration = "manual"</script>

Ce n'est pas supporté par IE. Compatibilité du navigateur.

52
imos

Après nombre d'échecs, j'ai finalement réussi à faire l'affaire. anzo est correct ici car utiliser beforeunload fera que la page passe en haut de la page lorsqu'un utilisateur recharge la page ou clique sur un lien. Donc, unload est clairement le moyen de le faire.

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

Manière Javascript (Merci ProfNandaa ):

window.onunload = function(){ window.scrollTo(0,0); }

EDIT: 16/07/2015

Le problème de saut est toujours présent avec Firefox, même avec l'événement unload.

17
Janaka Dombawela

Vous pouvez simplement mettre un # à la fin pour que la page se charge en haut.

Fonctionne sur tous les navigateurs, mobiles et de bureau, parce que c'est si simple.

$(document).ready(function() {
var url = window.location.href;
console.log(url);
if( url.indexOf('#') < 0 ) {
    window.location.replace(url + "#");
} else {
    window.location.replace(url);
}

});

// Ceci charge la page avec un # à la fin.

3
Daut

Voici une approche plus générale. Au lieu d'essayer d'empêcher le navigateur de faire défiler l'écran (ou de sauter au sommet comme il se présente), je rétablis simplement la position précédente sur la page. C'est à dire. J'enregistre le décalage y actuel de la page dans localStorage et défile jusqu'à cette position une fois la page chargée.

function storePagePosition() {
  var page_y = window.pageYOffset;
  localStorage.setItem("page_y", page_y);
}


window.addEventListener("scroll", storePagePosition);


var currentPageY;

try {
  currentPageY = localStorage.getItem("page_y");

  if (currentPageY === undefined) {
    localStorage.setItem("page_y") = 0;
  }

  window.scrollTo( 0, currentPageY );
} catch (e) {
    // no localStorage available
}
2
Oliver Schafeld