Previene lo scorrimento automatico del browser all’aggiornamento

Se vai a una pagina a e scorri e poi 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 hai fatto clic su un link http://example.com/post/244#comment5 e aggiornato la pagina dopo aver guardato intorno a te non sarebbe stato all’ancora e la pagina salterà intorno. C’è un modo per impedirlo con javascript? In questo modo, non importa, cosa passerai sempre all’ancora.

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

Fondamentalmente, se si usa un ancoraggio, ci colleghiamo all’evento scroll di Windows. L’idea è che il primo evento di scorrimento debba appartenere al riposizionamento automatico eseguito dal browser. In questo caso eseguiamo il nostro riposizionamento e quindi rimuoviamo l’evento associato. Ciò impedisce che gli scroll successivi della pagina causino il borking del 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à dopo il primo evento di scorrimento.

Dovresti associare lo scroll a questo:

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

Quindi il browser è indotto a credere che fosse all’inizio prima del refresh.

Per disabilitare il ripristino automatico dello scroll basta aggiungere questo tag alla sezione head.

  

Non è supportato da IE. Compatibilità con il browser.

Dopo il numero di insuccessi finalmente sono riuscito a fare il trucco. anzo è corretto qui poiché usando beforeunload farà in modo che la pagina salga all’inizio quando un utente ricarica la pagina o fa clic su un link. Quindi unload è il modo chiaro per farlo.

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

Modo Javascript (grazie a ProfNandaa ):

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

MODIFICA: 16/07/2015

Il problema del salto è ancora lì con Firefox anche con un evento di unload .

Puoi semplicemente inserire un # alla fine in modo che la pagina si carichi in alto.

Funziona su tutti i browser, mobili 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); } 

});

// Carica la pagina con un # alla fine.

Ecco un approccio più generale. Invece di cercare di impedire al browser di scorrere (o saltare in alto come sarebbe), ripristino solo la posizione precedente sulla pagina. Cioè sto registrando l’attuale scostamento y della pagina in localStorage e scorrono fino a questa posizione una volta caricata la pagina.

 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 } 

Dovresti essere capace di.

Onload, controlla se window.location.hash ha un valore. Se lo fa, prendi l’elemento con un id che corrisponde al valore hash. Trova la posizione dell’elemento (chiamate ricorsive su offsetTop / offsetLeft) e poi passa quei valori nel metodo window.scrollTo(x, y) .

Questo dovrebbe far scorrere la pagina sull’elemento desiderato.