Impedisci lo scorrimento automatico del browser all'aggiornamento

Se vai a una pagina a e scorri, aggiorna la pagina si aggiornerà nel punto in cui l'hai lasciata. Questo è ottimo, tuttavia ciò si verifica anche nelle pagine in cui è presente una posizione di ancoraggio nell'URL. Un esempio potrebbe essere se si fa clic su un collegamento http://example.com/post/244#comment5e si aggiorna la pagina dopo essersi guardati intorno, non si sarebbe all'ancora e la pagina salta. C'è un modo per impedirlo con javascript? In modo che non importa cosa navigherai sempre verso l'ancora.

Questa soluzione non è più consigliata a causa dei cambiamenti nel comportamento del browser. Vedi altre risposte.

Fondamentalmente, se viene utilizzato un ancoraggio, ci colleghiamo all'evento di scorrimento di Windows. L'idea è che il primo evento di scorrimento deve appartenere al riposizionamento automatico effettuato dal browser. Quando ciò si verifica, effettuiamo il nostro riposizionamento e quindi rimuoviamo l'evento associato. In questo modo si evita che i successivi scorrimenti di pagina disturbino il sistema.

$(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");
        });
    }

});

Su Chrome, anche se imposti scrollTop su 0, salterà in seguito dopo il primo evento di scorrimento.

Dovresti associare la pergamena a questo:

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

Quindi il browser è indotto a credere che fosse all'inizio prima dell'aggiornamento.

Per disabilitare il ripristino dello scorrimento automatico, aggiungi questo tag alla sezione principale.

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

Non è supportato da IE. Compatibilità del browser.

Dopo numerosi fallimenti finalmente sono riuscito a fare il trucco. anzo è corretto qui in quanto l'utilizzo beforeunloadfarà saltare la pagina all'inizio quando un utente ricarica la pagina o fa clic su un collegamento. Quindi unloadè il modo chiaro per farlo.

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

Modo Javascript (Grazie ProfNandaa ):

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

EDIT: 16/07/2015

Il problema del salto è ancora presente con Firefox anche con l' unloadevento.

Ecco un approccio più generale. Invece di cercare di impedire al browser di scorrere (o saltare all'inizio come apparirebbe), ripristino semplicemente la posizione precedente sulla pagina. Cioè sto registrando l'offset y corrente della pagina in localStorage e scorro fino a questa posizione una volta che la pagina è stata caricata.

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
}

Puoi semplicemente mettere un # alla fine in modo che la pagina venga caricata in alto.

Funziona su tutti i browser, mobile e desktop, perché è così semplice.

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

});

// Questo carica la pagina con un # alla fine.

Questo funziona per me.

    //Reset scroll top

    history.scrollRestoration = "manual"

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

Dovresti essere capace di.

Onload, controlla se window.location.hashha un valore. In tal caso, prendi l'elemento con un ID che corrisponde al valore hash. Trova la posizione dell'elemento (chiamate ricorsive a offsetTop / offsetLeft) e poi passa quei valori nelwindow.scrollTo(x, y) metodo.

Questo dovrebbe far scorrere la pagina fino all'elemento desiderato.