Erzwingen Sie, dass die Bildlaufposition bei der Seitenaktualisierung in HTML nach oben verschoben wird

129

Ich baue eine Website auf, die ich mit divs veröffentliche. Wenn ich die Seite aktualisiere, nachdem sie zu Position X gescrollt wurde, wird die Seite mit der Bildlaufposition X geladen.

Wie kann ich erzwingen, dass die Seite bei der Seitenaktualisierung nach oben gescrollt wird?

  • Was ich denken kann, ist von einigen JS oder jQuery Laufes als onLoad()Funktion der Seite SET der Seiten nach oben scrollen. Aber ich weiß nicht, wie ich das machen könnte.

  • Eine bessere Option wäre, wenn es eine Eigenschaft oder etwas gibt, bei der die Seite standardmäßig mit ihrer Bildlaufposition geladen wird (dh oben). Dies ähnelt dem Laden einer Seite anstelle einer Seitenaktualisierung .

javascript jquery html pageload page-refresh Mond
quelle
Überraschenderweise hat keine der Lösungen hier für mich funktioniert, aber diese hat funktioniert: stackoverflow.com/a/11486546/470749
Ryan

Antworten:

165

Für eine einfache Ebene JavaScript - Implementierung:

window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}
Erweitern Sie das Snippet

ProfNandaa
quelle
1
Dies ist die richtige Antwort. Die jQuery-Lösung funktioniert nicht in allen Fällen.
Harry Stevens
@ Paul12_ - Ich habe es gerade getestet Safari 11.0.3und funktioniert für mich in Ordnung. Welches verwenden Sie?
ProfNandaa
Das hat bei mir nicht funktioniert. Ich musste von der Funktion onbeforeload zurückkehren, damit es funktioniert.
Iqbal
@Iqbal - was hast du gemacht return?
ProfNandaa
1
Hinzufügen document.querySelector('html').style.scrollBehavior = '';kann auch notwendig sein. Wenn es auf eingestellt ist, smoothwird es möglicherweise nicht nach oben verschoben, bevor die Seite neu geladen wird.
Kevnk
35

Die Antwort hier funktioniert nicht für Safari, document.ready wird oft zu früh abgefeuert.

Sollte das beforeunloadEreignis verwenden, das Sie daran hindert, etwas zu tunsetTimeout

$(window).on('beforeunload', function(){
  $(window).scrollTop(0);
});
Ben
quelle
1
Nach Bildlauffunktion hinzufügen: $ ('html'). Text (''); , so wird Kinderwagen zurückgesetzt
user956584
1
@ Benutzerpasswort Glaubst du nicht, dass $ ("html"). Remove () besser wäre?
Ben
18

Wieder ist die beste Antwort:

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

(das ist für Nicht-jQuery, schauen Sie nach, wenn Sie nach der JQ-Methode suchen)

BEARBEITEN: Ein kleiner Fehler ist "onbeforunload" :) Chrome und andere Browser "merken" sich die letzte Bildlaufposition vor dem Entladen. Wenn Sie also den Wert kurz vor dem Entladen Ihrer Seite auf 0,0 setzen, werden sie sich an 0,0 erinnern und gewinnen Scrollen Sie nicht zurück zu der Stelle, an der sich die Bildlaufleiste befand :)

Xoxel
quelle
@ Paul12_ Safari muss document.documentElement.scrollTopfunktionieren. Normalerweise benutze ich aber beide.
Graham O'Mahony
9

Überprüfen Sie die jQuery - .scrollTop()Funktion hier

Es würde ungefähr so ​​aussehen

$(document).load().scrollTop(0);
jon3laze
quelle
9

Sie können es auch versuchen 

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

Wenn Sie an der x-Position scrollen möchten, können Sie den Wert von 0 in x ändern.

Ankit
quelle
7

location.reload()Verwenden Sie stattdessen einfach location.href = location.href. Es wird nicht wie zuvor zur vorherigen Position location.reload()gescrollt.

Hinweis: Dies wird nicht neu geladen, wenn die URL ein # enthält

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

Fügen Sie das obige Skript in das <head>Tag Ihres HTML-Codes ein. Nicht sicher, wie sich einseitige Apps verhalten! Aber sicher funktioniert es wie Charme auf normalen Seiten.

harsch53
quelle
4

Die Antwort hier (Scrollen $(document).ready) funktioniert nicht, wenn die Seite ein Video enthält. In diesem Fall wird die Seite nach dem Auslösen dieses Ereignisses gescrollt, wodurch unsere Arbeit außer Kraft gesetzt wird.

Die beste Antwort sollte sein:

$(window).on('beforeunload', function(){
    $(window).scrollTop(0);
});
DrPollit0
quelle
3 
$(document).ready(function(){
    $(window).scrollTop(0);
});

hat bei mir nicht funktioniert, da Google Chrome nach dem Laden der Seite einfach wieder nach unten scrollen würde. Was ich benutzt habe war

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

// Dies lädt die Seite mit einem # am Ende. Es wird also immer oben geladen.

Daut
quelle
2

Um das Fenster zurückzusetzen, scrollen Sie zurück nach oben. $(window).scrollTop(0)Im Ereignis vor dem Herunterladen werden die Tricks ausgeführt. Ich habe jedoch in Chrome 80 getestet , dass es nach dem erneuten Laden an den alten Speicherort zurückkehrt.

Um dies zu verhindern, setzen Sie history.scrollRestorationauf "manual".

//Reset scroll top

history.scrollRestoration = "manual";

$(window).on('beforeunload', function(){
      $(window).scrollTop(0);
});
Alex hat Spaß
quelle
Dies ist die beste Antwort für mich, funktioniert unter Chrome / Linux
SNS - Web und Informatique
0

Die supercalifragilisticexpialidocious Antwort lautet:

Fügen Sie dies oben in Ihrer JS- Datei oder Ihrem Skript-Tag hinzu

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

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