webentwicklung-frage-antwort-db.com.de

Bei Seitenaktualisierung in HTML die Bildlaufposition der Seite nach oben erzwingen

Ich erstelle eine Website, die ich mit divs veröffentliche. Wenn ich die Seite nach dem Scrollen auf Position X aktualisiere, wird die Seite mit der Scroll-Position X geladen.

Wie kann ich beim Aktualisieren der Seite einen Bildlauf nach oben erzwingen?

  • Was ich mir vorstellen kann, ist eine JS- oder jQuery-Funktion, die als onLoad() -Funktion der Seite ausgeführt wird, um SET die Seiten nach oben zu 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 mit ihrer Bildlaufposition als Standard geladen wird (dh oben), was wie Seite laden anstelle von = aussieht Seite aktualisieren.

javascriptjqueryhtmlpageloadpage-refresh
107
Moon

Sie können dies mit der scrollTop -Methode unter DOM ready tun:

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

Für eine einfache plain JavaScript-Implementierung:

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

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

Sollte das beforeunload -Ereignis verwenden, das Sie daran hindert, etwas setTimeout zu tun

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

Auch hier 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 sein "onbeforunload" :) Chrome und andere Browser "merken" sich "die letzte Bildlaufposition vor dem Entladen, also wenn Sie den Wert kurz vor dem Entladen Ihres Seite, an die sie sich von 0,0 erinnern und nicht dorthin zurückscrollen, wo sich die Bildlaufleiste befand :)

11
xoxel

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

Es würde ungefähr so ​​aussehen

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

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.

9
Ankitkumar Bhatt

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

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

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

Setzen Sie das obige Skript in <head> Tag Ihres HTML. Ich bin mir nicht sicher, wie sich Apps für einzelne Seiten verhalten. Aber sicher funktioniert das wie Charme auf normalen Seiten.

4
harshes53

Die Antwort hier (Scrollen in $(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.

Beste Antwort sollte sein:

$(window).on('beforeunload', function(){
    $(window).scrollTop(0);
});
4
DrPollit0
$(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 verwendet 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.

3
Daut

Die supercalifragilisticexpialidocious Antwort ist:

fügen Sie dies oben in Ihre js -Datei oder Skript-Tag ein

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

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