Zapobiegaj automatycznemu przewijaniu przeglądarki podczas odświeżania

Jeśli przejdziesz do strony a i przewiniesz, strona odświeży się w miejscu, w którym ją zostawiłeś. Jest to świetne, jednak dzieje się tak również na stronach, na których adres URL znajduje się zakotwiczenie. Przykładem może być kliknięcie linku http://example.com/post/244#comment5i odświeżenie strony po rozejrzeniu się, nie byłbyś w kotwicy i strona przeskakuje. Czy jest jakiś sposób, aby temu zapobiec za pomocą javascript? Aby nieważne, co zawsze kierować do kotwicy.

To rozwiązanie nie jest już zalecane ze względu na zmiany w zachowaniu przeglądarki. Zobacz inne odpowiedzi.

Zasadniczo, jeśli używana jest kotwica, łączymy się ze zdarzeniem przewijania systemu Windows. Chodzi o to, że pierwsze zdarzenie przewijania musi należeć do automatycznego ponownego pozycjonowania wykonywanego przez przeglądarkę. Kiedy to nastąpi, dokonujemy własnej zmiany pozycji, a następnie usuwamy powiązane zdarzenie. Zapobiega to zepsuciu systemu przez kolejne przewijanie stron.

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

});

W Chrome, nawet jeśli wymusisz scrollTop na 0, przeskoczy on później po pierwszym zdarzeniu przewijania.

Powinieneś powiązać zwój z tym:

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

Tak więc przeglądarka jest oszukiwana, by uwierzyć, że było to na początku przed odświeżeniem.

Aby wyłączyć automatyczne przywracanie przewijania, po prostu dodaj ten tag do sekcji nagłówka.

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

Nie jest obsługiwany przez IE. Zgodność z przeglądarkami.

Po wielu niepowodzeniach w końcu udało mi się załatwić sprawę. anzo ma tutaj rację, ponieważ użycie beforeunloadspowoduje, że strona przeskoczy na górę, gdy użytkownik ponownie załaduje stronę lub kliknie łącze. Więc unloadjest to jasny sposób, aby to zrobić.

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

Sposób Javascript (dzięki ProfNandaa ):

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

EDYCJA: 16/07/2015

Problem ze skokiem jest nadal obecny w Firefoksie, nawet w unloadprzypadku zdarzenia.

Oto bardziej ogólne podejście. Zamiast próbować zapobiec przewijaniu się przeglądarki (lub przeskakiwaniu na górę, jak by to wyglądało), po prostu przywracam poprzednią pozycję na stronie. To znaczy, że rejestruję bieżące przesunięcie Y strony w localStorage i przewijam do tej pozycji po załadowaniu strony.

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
}

Możesz po prostu wstawić # na końcu, aby strona załadowała się na górze.

Działa na wszystkich przeglądarkach mobilnych i stacjonarnych, ponieważ jest takie proste.

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

});

// To ładuje stronę z # na końcu.

To działa dla mnie.

    //Reset scroll top

    history.scrollRestoration = "manual"

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

Powinieneś być w stanie.

Podczas ładowania sprawdź, czy window.location.hashma wartość. Jeśli tak, weź element z identyfikatorem, który pasuje do wartości skrótu. Znajdź pozycję elementu (rekurencyjne wywołania offsetTop / offsetLeft), a następnie przekaż te wartości do window.scrollTo(x, y)metody.

Powinno to przewinąć stronę do żądanego elementu.