Zachowaj pozycję paska przewijania nawet po ponownym wczytaniu za pomocą javascript

Question

Mam wymaganie, jeśli po kliknięciu pola wyboru wartość zostanie przesłana, a zatem strona zostanie ponownie załadowana. Teraz, aby kliknąć inne pole wyboru, muszę przewinąć ponownie, co nie jest lepszym pomysłem. Teraz chcę zachować pozycję paska przewijania, nawet po wczytaniu strony. Czy jest jakaś metoda w javascript? Próbowałem kodu poniżej, ale nie było szczęścia.

<input type="checkbox" onclick="myFunction()"/> One <br/> 

function myFunction() { 
     document.body.scrollTop = 500px; 
     } 

Przeglądałem także wiele stron internetowych, ale nic nie działało dla mnie. Pomóż mi rozwiązać ten problem.

Dzięki.

Answer 1

Można użyć sesji przechowywania aby zapisać pozycję, a następnie wrócić do pozycji, gdy strona jest przeładowana, tak:

$(window).scroll(function() { 
    sessionStorage.scrollTop = $(this).scrollTop(); 
}); 

$(document).ready(function() { 
    if (sessionStorage.scrollTop != "undefined") { 
    $(window).scrollTop(sessionStorage.scrollTop); 
    } 
}); 

Here is the JSFiddle demo

Answer 2

Ustawienie scrollTop robi to (ustawiasz je na documentElement w większości przeglądarek, ale na body na innych, najprościej jest po prostu ustawić na obu). Ponadto wartość jest liczbą (nr px).

Ale trzeba to zrobić w odpowiednim czasie, czyli postrona została przeładowana, ewentualnie po setTimeout lub nawet w onload zwrotnego (trzeba eksperymentować, aby dowiedzieć się, które działa na swojej stronie). Oto przykład setTimeout:

setTimeout(function() { 
    document.documentElement.scrollTop = 
     document.body.scrollTop = 500; 
}, 0); 

Jednak, nie będę tego robić. Zamiast tego, przesłać wartość pola wyboru za pośrednictwem ajax i nie przeładować strony. Nawet jeśli przewiniesz w dół do miejsca, w którym użytkownik był po przeładowaniu, wciąż jest niespodzianką dla strony, aby przeładować po sprawdzeniu skrzynki (pamiętam, co Amazon zrobił), a to wymaga czasu. Ajax pozwoliłby na to, aby działo się to w tle, nie przeszkadzając użytkownikowi.

Answer 3

To przyzwyczajenie być dobrą praktyką UI do stworzyć takie zachowanie, powinieneś spróbować użyć AJAX, jeśli chcesz powiadomić serwer, gdy tylko pole wyboru zostanie przełączone. Lub po prostu użyj formularza html, jeśli chcesz wysłać odpowiedź innych elementów jako pęczek do serwera.

Na wszelki wypadek, jeśli nadal chcesz osiągnąć funkcjonalność, powyższy kod nie zadziała, ponieważ zaraz po załadowaniu strony cała domena zostanie przeładowana. Można to jeszcze osiągnąć za pomocą plików cookie lub localstorage, w których można ustawić flagę lub wartość (w liczbie całkowitej) do przewijania. Na stronie wczytaj sprawdź, czy ustawiono jakąś wartość na konkretny plik cookie lub zmienną localStorage, a następnie przewiń do podanej wartości. Należy zauważyć, że jest to bardzo niekorzystna praktyka w zakresie interfejsu użytkownika. Gorąco polecam użyć ajax lub przesłać wartości razem za pomocą formularza.