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

Si vous allez sur une page et faites défiler la page, actualisez la page à l'endroit où vous l'avez laissée. C'est génial, mais cela se produit également sur les pages où il y a un emplacement d'ancrage dans l'URL. Un exemple serait si vous avez cliqué sur un lien http://example.com/post/244#comment5et actualisé la page après avoir regardé autour de vous, vous ne seriez pas à l'ancre et la page saute. Existe-t-il un moyen d'empêcher cela avec JavaScript? Ainsi, quoi qu'il en soit, vous naviguiez toujours vers l'ancre.

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

Fondamentalement, si une ancre est utilisée, nous nous lions à 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 effectuons notre propre repositionnement, puis supprimons l'événement lié. Cela empêche les défilements de page suivants de perturber 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 parchemin à ceci:

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

Ainsi, le navigateur est amené à croire qu'il était au début avant l'actualisation.

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

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

Il n'est pas pris en charge par IE. Compatibilité du navigateur.

Après un certain nombre d'échecs, j'ai finalement réussi à faire l'affaire. anzo est correct ici car utiliser beforeunloadfera sauter la page en haut lorsqu'un utilisateur recharge la page ou clique sur un lien. Il en unloadva de même pour la manière claire de le faire.

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

Javascript way (Merci ProfNandaa ):

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

EDIT: 16/07/2015

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

Voici une approche plus générale. Au lieu d'essayer d'empêcher le navigateur de défiler (ou de sauter vers le haut comme cela aurait l'air), je restaure simplement la position précédente sur la page. C'est-à-dire que j'enregistre le décalage y actuel de la page dans localStorage et que je fais défiler 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
}

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

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

Cela fonctionne pour moi.

    //Reset scroll top

    history.scrollRestoration = "manual"

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

Tu devrais être capable de.

Lors du chargement, vérifiez si window.location.hasha une valeur. Si c'est le cas, récupérez l'élément avec un identifiant qui correspond à la valeur de hachage. Recherchez la position de l'élément (appels récursifs à offsetTop / offsetLeft), puis transmettez ces valeurs à la window.scrollTo(x, y)méthode.

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