Wymuś przewijanie strony do góry przy odświeżaniu strony w HTML

134

Buduję stronę internetową, którą publikuję z divs. Kiedy odświeżam stronę po przewinięciu do pozycji X, strona jest ładowana z pozycją przewijania X.

Jak wymusić przewijanie strony do góry podczas odświeżania strony?

To, co przychodzi mi do głowy, to niektóre JS lub jQuery uruchomione jako onLoad()funkcja strony, aby ustawić przewijanie stron do góry. Ale nie wiem, jak mogłem to zrobić.
Lepszą opcją byłoby, gdyby istniała jakaś właściwość lub coś, co powoduje, że strona jest ładowana z domyślną pozycją przewijania (tj. Na górze), co będzie przypominało ładowanie strony , zamiast jej odświeżania .

— Księżyc
źródło

O dziwo, żadne z rozwiązań tutaj nie zadziałało, ale to zadziałało: stackoverflow.com/a/11486546/470749

— Ryan

170

Możesz to zrobić za pomocą metody scrollTop na DOM ready :

$(document).ready(function(){
    $(this).scrollTop(0);
});

— Poklepać
źródło

9

Nie działa w Safari. Ale to -> stackoverflow.com/a/18633915/102133 tak.

— Ben

174

Aby uzyskać prostą implementację zwykłego JavaScript:

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

Rozwiń fragment

— ProfNandaa
źródło

1

To jest poprawna odpowiedź. Rozwiązanie jQuery nie działa we wszystkich przypadkach.

— Harry Stevens

@ Paul12_ - Właśnie to przetestowałem Safari 11.0.3i dla mnie działa dobrze, którego używasz?

— ProfNandaa

To nie zadziałało dla mnie. Musiałem wrócić z funkcji onbeforeload, aby działała.

— Iqbal

@Iqbal - co zrobiłeś return?

— ProfNandaa

1

dodanie document.querySelector('html').style.scrollBehavior = '';może być konieczne. Jeśli był ustawiony na smooth, może nie dotrzeć na początek strony przed ponownym załadowaniem strony.

— kevnk

35

Odpowiedź tutaj nie działa dla safari, dokument. Często jest już odpalany zbyt wcześnie.

Powinien użyć beforeunloadzdarzenia, które uniemożliwia ci jakąś formęsetTimeout

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

— Ben
źródło

1

Funkcja dodawania po przewijaniu: $ ('html'). Text (''); , więc wózek zostanie zresetowany

— user956584

1

@Userpassword Nie sądzisz, że $ ("html"). Remove () byłoby lepsze?

— Ben

20

Ponownie, najlepszą odpowiedzią jest:

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

(to jest dla innych niż jQuery, sprawdź, jeśli szukasz metody JQ)

EDYCJA: mały błąd to "onbeforunload" :) Chrome i inne przeglądarki "zapamiętują" ostatnią pozycję przewijania przed wyładowaniem, więc jeśli ustawisz wartość na 0,0 tuż przed wyładowaniem strony, zapamiętają 0,0 i wygrają nie przewijaj z powrotem do miejsca, w którym był pasek przewijania :)

— xoxel
źródło

@ Paul12_ Safari wymaga document.documentElement.scrollTopdo działania. Zwykle używam obu.

— Graham John

9

Sprawdź tutaj.scrollTop() funkcję jQuery

Wyglądałoby to jakoś

$(document).load().scrollTop(0);

— jon3laze
źródło

9

Możesz też spróbować

$(document).ready(function(){
    $(window).scrollTop(0);
});

Jeśli chcesz przewijać w pozycji x, możesz zmienić wartość z 0 na x.

— Ankit
źródło

7

Zamiast tego location.reload()po prostu użyj location.href = location.href. Nie przejdzie do poprzedniej pozycji, tak jak to location.reload()robi.

Uwaga: nie załaduje się ponownie, jeśli w adresie URL będzie #

— Nauphal
źródło

6

Aby zresetować okno przewiń z powrotem do góry, $(window).scrollTop(0)w zdarzeniu beforeunload robi się sztuczki, jednak testowałem w Chrome 80, po ponownym załadowaniu wróci do starej lokalizacji.

Aby temu zapobiec, ustaw opcję history.scrollRestorationna "manual".

//Reset scroll top

history.scrollRestoration = "manual";

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

— Alex dobrze się bawi
źródło

To dla mnie najlepsza odpowiedź, działa na Chrome / Linux

— SNS - Web et Informatique

4

<script> location.hash = (location.hash) ? location.hash : " "; </script>

Powyższy skrypt <head>umieść w tagu swojego html. Nie jestem pewien, jak zachowują się aplikacje na jednej stronie! Ale na pewno działa jak urok na zwykłych stronach.

— szorstki53
źródło

4

Odpowiedź tutaj (przewijanie $(document).ready) nie działa, jeśli na stronie jest wideo. W takim przypadku strona jest przewijana po uruchomieniu tego zdarzenia, nadpisując naszą pracę.

Najlepsza odpowiedź powinna brzmieć:

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

— DrPollit0
źródło

3

$(document).ready(function(){
    $(window).scrollTop(0);
});

nie działało dla mnie, ponieważ Google Chrome po prostu przewijał się w dół po zakończeniu ładowania strony. To, czego użyłem, było

$(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. Więc zawsze ładuje się na górze.

— Daut
źródło

0

Superkalifragilistyczno-ekspercka odpowiedź brzmi:

dodaj to na początku pliku js lub tagu skryptu

document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

document.body.scrollTop = 0; // For Safari

— Nicobels
źródło

0

Jest to jeden z najlepszych sposobów:

<script>
$(window).on('beforeunload', function() {
  $('body').hide();
  $(window).scrollTop(0);
});
</script>

Rozwiń fragment

— Ciężkie bombardowanie
źródło