Verhindern Sie das automatische Scrollen des Browsers beim Aktualisieren

Wenn Sie zu einer Seite a gehen und herumblättern, wird die Seite an der Stelle aktualisiert, an der Sie sie verlassen haben. Dies ist großartig, tritt jedoch auch auf Seiten auf, auf denen sich in der URL eine Ankerposition befindet. Ein Beispiel wäre, wenn Sie auf einen Link http://example.com/post/244#comment5klicken und die Seite aktualisieren, nachdem Sie sich umgesehen haben, wären Sie nicht am Anker und die Seite springt herum. Gibt es eine Möglichkeit, dies mit Javascript zu verhindern? Damit egal was Sie immer zum Anker navigieren würden.

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

Wenn ein Anker verwendet wird, binden wir grundsätzlich an das Windows-Bildlaufereignis. Die Idee ist, dass das erste Bildlaufereignis zur automatischen Neupositionierung durch den Browser gehören muss. In diesem Fall positionieren wir uns neu und entfernen dann das gebundene Ereignis. Dies verhindert, dass nachfolgende Seitenrollen das System stören.

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

});

Selbst wenn Sie in Chrome scrollTop auf 0 setzen, springt es nach dem ersten Scroll-Ereignis nachher.

Sie sollten die Schriftrolle daran binden:

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

Der Browser wird also ausgetrickst, um zu glauben, dass es am Anfang vor der Aktualisierung war.

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

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

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

Nach einer Reihe von Fehlern habe ich es endlich geschafft, den Trick zu machen. anzo ist hier korrekt, da bei Verwendung beforeunloaddie Seite nach oben springt, wenn ein Benutzer die Seite neu lädt oder auf einen Link klickt. So unloadist der klare Weg, dies zu tun.

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

Javascript Weg (Danke ProfNandaa ):

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

EDIT: 16/07/2015

Das Sprungproblem ist bei Firefox auch bei unloadEreignissen noch vorhanden.

Hier ist ein allgemeinerer Ansatz. Anstatt zu verhindern, dass der Browser einen Bildlauf durchführt (oder nach oben springt, wie es aussehen würde), stelle ich einfach die vorherige Position auf der Seite wieder her. Dh ich zeichne den aktuellen y-Offset der Seite in localStorage auf und scrolle zu dieser Position, sobald die Seite geladen wurde.

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
}

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

Funktioniert auf allen Browsern, Mobilgeräten und Desktops, 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.

Das funktioniert bei mir.

    //Reset scroll top

    history.scrollRestoration = "manual"

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

Du solltest in der Lage sein zu.

Überprüfen Sie beim Laden, ob window.location.hashein Wert vorhanden ist. Wenn dies der Fall ist, greifen Sie auf das Element mit einer ID zu, die dem Hashwert entspricht. Suchen Sie die Position des Elements (rekursive Aufrufe von offsetTop / offsetLeft) und übergeben Sie diese Werte an die window.scrollTo(x, y)Methode.

Dies sollte die Seite zum gewünschten Element scrollen.