Buộc vị trí cuộn trang lên đầu tại làm mới trang trong HTML

129

Tôi đang xây dựng một trang web mà tôi đang xuất bản với divs. Khi tôi làm mới trang sau khi được cuộn đến vị trí X, thì trang được tải với vị trí cuộn là X.

Làm cách nào tôi có thể buộc trang được cuộn lên đầu trang trên làm mới trang?

Những gì tôi có thể nghĩ là về một số JS hoặc jQuery chạy như onLoad()chức năng của trang để THIẾT LẬP các trang cuộn lên trên cùng. Nhưng tôi không biết làm thế nào tôi có thể làm điều đó.
Tùy chọn tốt hơn sẽ là nếu có một số thuộc tính hoặc thứ gì đó để trang được tải với vị trí cuộn của nó là mặc định (tức là ở trên cùng) sẽ giống như tải trang , thay vì làm mới trang .

— Mặt trăng
nguồn

Đáng ngạc nhiên, không có giải pháp nào ở đây có hiệu quả với tôi, nhưng giải pháp này đã làm: stackoverflow.com/a/11486546/470749

— Ryan

165

Bạn có thể làm điều đó bằng phương thức scrollTop trên DOM đã sẵn sàng :

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

— Pat
nguồn

9

Không hoạt động trên Safari. Nhưng điều này -> stackoverflow.com/a/18633915/102133 thì có.

— Ben

165

Đối với một đơn giản đơn giản thực hiện JavaScript:

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

Mở rộng đoạn trích

— Hồ sơ
nguồn

1

Đây là câu trả lời chính xác. Giải pháp jQuery không hoạt động trong mọi trường hợp.

— Harry Stevens

@ Paul12_ - Tôi vừa thử nó Safari 11.0.3và hoạt động ổn với tôi, bạn đang sử dụng cái nào?

— ProfNandaa

Điều này đã không làm việc cho tôi. Tôi đã phải quay trở lại từ chức năng onbeforeload để làm cho nó hoạt động.

— Iqbal

@Iqbal - bạn đã làm returngì?

— ProfNandaa

1

thêm document.querySelector('html').style.scrollBehavior = '';có thể là cần thiết quá. Nếu nó được đặt thành smooth, nó có thể không được lên đầu trước khi trang tải lại.

— kevnk

35

Câu trả lời ở đây không hoạt động đối với safari, document. Yet thường bị sa thải quá sớm.

Phải sử dụng beforeunloadsự kiện ngăn cản bạn hình thànhsetTimeout

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

— Bến
nguồn

1

Thêm sau chức năng cuộn: $ ('html'). Text (''); , vì vậy xe đẩy sẽ được đặt lại

— user956584

1

@Userpassword Bạn không nghĩ $ ("html"). Remove () sẽ tốt hơn?

— Ben

18

Một lần nữa, câu trả lời tốt nhất là:

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

(đó không phải là jQuery, hãy tìm nếu bạn đang tìm kiếm phương thức JQ)

EDIT: một chút nhầm lẫn "onbeforunload" của nó 'cuộn trở lại vị trí của thanh cuộn :)

— xoxel
nguồn

@ Paul12_ Safari yêu cầu document.documentElement.scrollTopphải hoạt động. Tôi thường sử dụng cả hai mặc dù.

— Graham O'Mahony

9

Kiểm tra .scrollTop()chức năng jQuery tại đây

Nó sẽ trông giống như

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

— jon3laze
nguồn

9

Bạn cũng có thể thử

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

Nếu bạn muốn cuộn ở vị trí x hơn bạn có thể thay đổi giá trị từ 0 thành x.

— Ankit
nguồn

7

Thay vì location.reload(), chỉ cần sử dụng location.href = location.href. Nó sẽ không cuộn đến vị trí trước đó location.reload().

Lưu ý: Điều này sẽ không tải lại nếu có bất kỳ # nào trong URL

— Nauphal
nguồn

4

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

Đặt đoạn script trên vào <head>thẻ html của bạn. Không chắc chắn cách ứng dụng trang đơn hoạt động! Nhưng chắc chắn hoạt động như sự quyến rũ trong các trang thông thường.

— mật mã53
nguồn

4

Câu trả lời ở đây (cuộn vào $(document).ready ) không hoạt động nếu có video trong trang. Trong trường hợp đó, trang được cuộn sau khi sự kiện này được kích hoạt, ghi đè lên công việc của chúng tôi.

Câu trả lời tốt nhất nên là:

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

— DrPollit0
nguồn

3

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

không hoạt động với tôi vì google chrome sẽ chỉ cuộn xuống sau khi tải xong trang. Những gì tôi đã sử dụng là

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

// Điều này tải trang có dấu # ở cuối. Vì vậy, nó sẽ luôn luôn tải ở đầu.

— Daut
nguồn

3

Để thiết lập lại cửa sổ cuộn trở lại đầu trang, $(window).scrollTop(0) trong trường hợp tải trước, thực hiện các thủ thuật, tuy nhiên, tôi đã thử nghiệm trong Chrome 80, nó sẽ quay trở lại vị trí cũ sau khi tải lại.

Để ngăn chặn điều đó, thiết lập history.scrollRestorationđể "manual".

//Reset scroll top

history.scrollRestoration = "manual";

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

— Alex có niềm vui
nguồn

Đây là phản hồi tốt nhất đối với tôi, hoạt động trên Chrome / Linux

— SNS - Web et Informatique

0

Câu trả lời supercalifragilisticexpialidocious là:

thêm phần này vào đầu tệp js hoặc thẻ script của bạn

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

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

— Nicobels
nguồn