Empêchez le défilement automatique du navigateur pour actualiser

Veuillez noter que cela ne semble plus fonctionner chez Chrome. La réponse de Jose semble être la meilleure solution actuelle. Je laisse cette réponse intacte pour référence.

Fondamentalement, si une ancre est utilisée, nous nous lient à l'événement de défilement de 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 faisons notre propre repositionnement, puis supprimez l'événement lié. Cela empêche les rouleaux de page suivants de borking 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"); }); } }); 

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

Vous devez lier le défilement à ceci:

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

Ainsi, le navigateur est trompé de croire que c'était au début avant le rafraîchissement.

Après un certain nombre d'échecs, j'ai réussi à faire le tour. Anzo est correct ici car l'utilisation en avant-charge fera passer la page en haut lorsqu'un utilisateur recharge la page ou clique sur un lien. Le unload est clairement le moyen de le faire.

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

Mode Javascript (Merci ProfNandaa ):

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

EDIT: 16/07/2015

Le problème de saut est toujours là avec Firefox même avec un événement de unload .

Voici une approche plus générale. Au lieu d'essayer d'empêcher le navigateur de faire défiler (ou de sauter vers le haut comme il ressemblerait), je viens de restaurer la position précédente sur la page. C'est-à-dire que je enregistre le décalage-y actuel de la page dans localStorage et faites défiler jusqu'à cette position une fois que la page a été 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 } 

Tu devrais être capable de.

En charge, vérifiez si window.location.hash a une valeur. Si c'est le cas, saisissez l'élément avec un identifiant correspondant à la valeur de hachage. Trouvez la position de l'élément (appels récurrents sur offsetTop / offsetLeft) puis passez ces valeurs dans la méthode window.scrollTo(x, y) .

Cela devrait faire défiler la page vers l'élément désiré.

Vous pouvez simplement mettre un # à la fin afin que la page se chargera en haut.

Fonctionne sur tous les navigateurs, mobiles et de bureau, car il 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.