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

Question 1

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 .

Question 2

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

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

Question 3

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

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

Rozwiń fragment

Question 4

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);
});

Question 5

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 :)

Question 6

Sprawdź tutaj.scrollTop() funkcję jQuery

Wyglądałoby to jakoś

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

Question 7

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.

Question 8

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 #

Question 9

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);
});

Question 10

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

Question 11

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);
});

Question 12

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

Question 13

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

Question 14

Jest to jeden z najlepszych sposobów:

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

Rozwiń fragment

Answer 1

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 .

Answer 2

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

Ryan

Answer 3

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

Answer 4

9

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

Ben

Answer 5

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

Answer 6

1

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

Harry Stevens

Answer 7

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

ProfNandaa

Answer 8

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

Iqbal

Answer 9

@Iqbal - co zrobiłeś return?

ProfNandaa

Answer 10

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

Answer 11

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

Answer 12

1

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

user956584

Answer 13

1

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

Ben

Answer 14

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 :)

Answer 15

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

Graham John

Answer 16

9

Sprawdź tutaj.scrollTop() funkcję jQuery

Wyglądałoby to jakoś

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

jon3laze
źródło

Answer 17

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

Answer 18

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 #

Answer 19

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);
});

Answer 20

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

SNS - Web et Informatique

Answer 21

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

Answer 22

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);
});

Answer 23

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

Answer 24

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

Answer 25

Jest to jeden z najlepszych sposobów:

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

Rozwiń fragment

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

Odpowiedzi: