Zapobiegaj automatycznemu przewijaniu przeglądarki przy odświeżaniu

Question

Zapobiegaj automatycznemu przewijaniu przeglądarki przy odświeżaniu

Jeśli przejdziesz do strony a i przewijasz dookoła, odśwież stronę 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 znajduje się lokalizacja zakotwiczenia w adresie url. Przykładem może być kliknięcie linku http://example.com/post/244#comment5 i odświeżenie strony po obejrzeniu nie będzie na zakotwiczeniu, a strona przeskakuje. Czy jest jakiś sposób, aby temu zapobiec za pomocą javascript? Tak, że bez względu na to, co zawsze będziesz nawigować do kotwicy.

77

javascript browser

Author: ThomasReggi, 2011-08-12

Source

7 answers

W Chrome, nawet jeśli wymusisz scrollTop na 0, przeskoczy po pierwszym zdarzeniu przewijania.

Należy powiązać zwój z tym:

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

Więc przeglądarka jest oszukana, aby uwierzyć, że była na początku przed odświeżeniem.

132

Author: josetapadas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-05 10:30:34

Aby wyłączyć automatyczne przywracanie przewijania, dodaj ten znacznik do sekcji head.

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

Nie jest obsługiwany przez IE. zgodność przeglądarki.

26

Author: imos,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-13 04:53:21

Po wielu porażkach w końcu udało mi się zrobić sztuczkę. anzo jest tutaj poprawne, ponieważ użycie beforeunload spowoduje, że strona przejdzie do góry, gdy użytkownik przeładuje stronę lub kliknie link. Więc unload jest oczywistym sposobem, aby to zrobić.

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

Javascript way (Thanks ProfNandaa):

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

Edytuj: 16/07/2015

Problem ze skokiem nadal istnieje w Firefoksie nawet przy zdarzeniu unload.

15

Author: Janaka Dombawela,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:33:26

Możesz po prostu umieścić # na końcu, aby Strona załadowała się na górze.

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

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

3

Author: Daut,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-18 09:59:42

Oto bardziej ogólne podejście. Zamiast próbować uniemożliwić przewijanie przeglądarki (lub skakanie do góry, jak to wygląda), po prostu przywracam poprzednią pozycję na stronie. Zapisuję 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
}

2

Author: Oliver Schafeld,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-05 15:25:27

Powinieneś być w stanie.

Onload, sprawdź czy window.location.hash ma wartość. Jeśli tak się stanie, chwyć element o id odpowiadającym wartości hash. Znajdź pozycję elementu (rekurencyjne wywołania offsetTop/offsetLeft), a następnie przekaż te wartości do metody window.scrollTo(x, y).

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

-1

Author: nikmd23,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-21 06:58:33

score 15 · Accepted Answer

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, wiążemy Zdarzenie przewijania systemu windows. Chodzi o to, że pierwsze zdarzenie przewijania musi należeć do automatycznego przestawiania wykonywanego przez przeglądarkę. Kiedy to nastąpi, wykonujemy własne repozycjonowanie, a następnie usuwamy związane Zdarzenie. Zapobiega to powstawaniu kolejnych przewijań stron w systemie.

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

});