Forza la posizione di scorrimento della pagina verso l'alto all'aggiornamento della pagina in HTML

129

Sto costruendo un sito Web che sto pubblicando con divs. Quando aggiorno la pagina dopo che è stata fatta scorrere nella posizione X, la pagina viene caricata con la posizione di scorrimento come X.

Come posso forzare lo scorrimento della pagina all'inizio dell'aggiornamento della pagina?

Quello che mi viene in mente è di alcuni JS o jQuery eseguiti come onLoad()funzione della pagina per impostare le pagine scorrere verso l'alto. Ma non so come potrei farlo.
Un'opzione migliore sarebbe se c'è una proprietà o qualcosa per cui la pagina viene caricata con la sua posizione di scorrimento come predefinita (cioè nella parte superiore) che sarà un po 'come il caricamento della pagina , invece dell'aggiornamento della pagina .

— Luna
fonte

Sorprendentemente, nessuna delle soluzioni qui ha funzionato per me, ma questa ha funzionato: stackoverflow.com/a/11486546/470749

— Ryan

165

Puoi farlo usando il metodo scrollTop su DOM pronto :

$(document).ready(function(){
    $(this).scrollTop(0);
});

— colpetto
fonte

9

Non funziona su Safari. Ma questo -> stackoverflow.com/a/18633915/102133 lo fa.

— Ben,

165

Per una semplice semplice implementazione JavaScript:

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

Espandi frammento

— ProfNandaa
fonte

1

Questa è la risposta corretta La soluzione jQuery non funziona in tutti i casi.

— Harry Stevens,

@ Paul12_ - L'ho appena provato Safari 11.0.3e funziona bene per me, quale stai usando?

— ProfNandaa,

Questo non ha funzionato per me. Ho dovuto tornare dalla funzione onbeforeload per farlo funzionare.

— Iqbal,

@Iqbal - che cosa hai fatto return?

— ProfNandaa,

1

document.querySelector('html').style.scrollBehavior = '';potrebbe essere necessario aggiungere anche. Se impostato su smooth, potrebbe non arrivare all'inizio prima che la pagina venga ricaricata.

— Kevinev

35

La risposta qui non funziona per Safari, document. Già viene spesso licenziata troppo presto.

Dovresti usare l' beforeunloadevento che ti impedisce di farlosetTimeout

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

— Ben
fonte

1

Aggiungi dopo la funzione di scorrimento: $ ('html'). Text (''); , quindi il passeggino verrà resettato

— user956584 l'

1

@Userpassword Non pensi che $ ("html"). Remove () sarebbe migliore?

— Ben

18

Ancora una volta, la migliore risposta è:

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

(questo è per non jQuery, cerca se stai cercando il metodo JQ)

EDIT: un piccolo errore è "onbeforunload" :) Chrome e altri browser "ricordano" l'ultima posizione di scorrimento prima dello scarico, quindi se imposti il valore su 0,0 appena prima dello scarico della tua pagina, ricorderanno 0,0 e vinto torna indietro dove era la barra di scorrimento :)

— xoxel
fonte

@ Paul12_ Safari richiede document.documentElement.scrollTopdi funzionare. In genere uso entrambi però.

— Graham O'Mahony,

9

Controlla qui la.scrollTop() funzione jQuery

Sembrerebbe qualcosa del genere

$(document).load().scrollTop(0);

— jon3laze
fonte

9

Puoi anche provare

$(document).ready(function(){
    $(window).scrollTop(0);
});

Se si desidera scorrere in posizione x, è possibile modificare il valore da 0 a x.

— ankit
fonte

7

Invece di location.reload()usare semplicemente location.href = location.href. Non scorrerà alla posizione precedente come location.reload()fa.

Nota: questo non verrà ricaricato se nell'URL sono presenti #

— Nauphal
fonte

4

<script> location.hash = (location.hash) ? location.hash : " "; </script>

Inserisci lo script sopra nel <head>tag del tuo html. Non sono sicuro di come si comportano le app a pagina singola! Ma sicuramente funziona come il fascino nelle pagine normali.

— harshes53
fonte

4

La risposta qui (scorrendo $(document).ready) non funziona se c'è un video nella pagina. In tal caso la pagina viene fatta scorrere dopo che questo evento è stato attivato, sovrascrivendo il nostro lavoro.

La migliore risposta dovrebbe essere:

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

— DrPollit0
fonte

3

$(document).ready(function(){
    $(window).scrollTop(0);
});

non ha funzionato per me poiché google chrome scorreva verso il basso dopo il caricamento della pagina. Quello che ho usato era

$(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. Quindi verrà sempre caricato in alto.

— Daut
fonte

3

Per ripristinare la finestra, scorrere verso l'alto, $(window).scrollTop(0)nell'evento beforeunload esegue i trucchi, tuttavia, ho testato in Chrome 80 che tornerà alla vecchia posizione dopo il ricaricamento.

Per evitare che, impostare l' history.scrollRestorationa "manual".

//Reset scroll top

history.scrollRestoration = "manual";

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

— Alex si diverte
fonte

Questa è la risposta migliore per me, funziona su Chrome / Linux

— SNS - Web et Informatique il

0

La risposta supercalifragilisticexpialidocious è:

aggiungilo nella parte superiore del tuo file js o tag script

document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

document.body.scrollTop = 0; // For Safari

— Nicobels
fonte