Frage Verhindert automatisches Durchsuchen des Browsers beim Aktualisieren


Wenn Sie auf eine Seite a gehen und einen Bildlauf durchführen, wird die Seite an der Stelle aktualisiert, an der Sie sie verlassen haben. Das ist großartig, jedoch geschieht dies auch auf Seiten, auf denen sich in der URL eine Ankerposition befindet. Ein Beispiel wäre, wenn Sie auf einen Link geklickt haben http://example.com/post/244#comment5 und die Seite aktualisiert, nachdem du dich umgeschaut hast, wärst du nicht am Anker und die Seite springt herum. Gibt es eine Möglichkeit, dies mit Javascript zu verhindern? Das ist also egal, was Sie immer zum Anker navigieren würden.


75
2017-08-12 03:35


Ursprung


Antworten:


Diese Lösung wird aufgrund von Änderungen im Browserverhalten nicht mehr empfohlen. Siehe andere Antworten.

Wenn ein Anker verwendet wird, binden wir uns im Grunde an das Windows-Scroll-Ereignis. Die Idee ist, dass das erste Scroll-Ereignis zur automatischen Neupositionierung durch den Browser gehören muss. Wenn dies auftritt, führen wir unsere eigene Neupositionierung durch und entfernen dann das gebundene Ereignis. Dies verhindert, dass nachfolgende Seitenrollen das System durchforsten.

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

});

15
2017-08-12 04:46



Wenn Sie in Chrome die Option scrollTop auf 0 setzen, wird nach dem ersten Bildlaufereignis ein Sprung ausgeführt.

Sie sollten die Rolle an diese binden:

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

So wird der Browser ausgetrickst zu glauben, dass es vor der Aktualisierung am Anfang war.


126
2017-09-05 10:30



Um die automatische Scroll-Wiederherstellung zu deaktivieren, fügen Sie dieses Tag einfach zum Kopfbereich hinzu.

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

Es wird nicht von IE unterstützt. Browser-Kompatibilität.


22
2017-10-13 04:42



Nach mehreren Misserfolgen schaffte ich es endlich. anzo ist hier richtig als verwenden beforeunload Die Seite wird nach oben springen, wenn ein Benutzer die Seite neu lädt oder auf einen Link klickt. Damit unload ist der eindeutige Weg, dies zu tun.

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

Javascript Weg (Danke ProfNandaa):

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

BEARBEITEN: 16/07/2015

Das Jump-Problem ist bei Firefox noch mit dabei unload Veranstaltung.


15
2017-07-06 12:47



Sie können einfach ein # am Ende setzen, damit die Seite oben geladen wird.

Funktioniert auf allen Browsern, mobilen und Desktop, weil es so einfach ist.

$(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.


3
2017-08-18 09:59



Hier ist ein allgemeinerer Ansatz. Anstatt zu versuchen zu verhindern, dass der Browser scrollt (oder nach oben springt, wie es aussehen würde), stelle ich einfach die vorherige Position auf der Seite wieder her. I.e. Ich zeichne den aktuellen Y-Offset der Seite in localStorage auf und scrolle zu dieser Position, sobald die Seite geladen ist.

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
}

2
2018-03-05 15:25



Du solltest dazu fähig sein.

Laden Sie nach, ob window.location.hash hat einen Wert. Wenn dies der Fall ist, greifen Sie auf das Element mit einer ID zu, die mit dem Hashwert übereinstimmt. Suchen Sie nach der Position des Elements (rekursive Aufrufe von offsetTop / offsetLeft) und geben Sie diese Werte dann in das window.scrollTo(x, y) Methode.

Dies sollte die Seite zum gewünschten Element scrollen.


-1
2017-08-12 03:44