Ngăn chặn Làm mới 'Nhảy' với Javascript

Tôi nhận thấy rằng nếu bạn đang ở trên một trang và bạn đã cuộn xuống một chút, nếu bạn làm mới trang, hầu hết các trình duyệt sẽ đưa bạn trở lại vị trí của mình. Có cách nào để ngăn chặn điều này?Ngăn chặn Làm mới 'Nhảy' với Javascript

Tôi đã xem xét hai tùy chọn và không nhất quán trên Webkit/Firefox.

window.scrollTo(0, 1); 
    $('html, body').animate({ scrollTop: 0 }, 0);

Bất kỳ ý tưởng nào?

Bạn có thể kiểm tra kết quả tìm kiếm trên google để biết ví dụ.

Nguồn

2012-03-04 Mark Davidson

Đây là trái ngược với những gì mọi người thường muốn. Tuy nhiên, nếu bạn chỉ cần thêm một băm '#' vào cuối URL, nó sẽ nhảy lên đầu trên làm mới, theo mặc định. – Sparky

@minitech Tôi đọc đó là OP muốn ngăn trình duyệt quay trở lại vị trí cuộn trước đó như Sparky672 gợi ý và thay vào đó quay lại đầu trang. –

@minitech: Trên thực tế câu hỏi là làm thế nào để ngăn chặn việc di chuyển. –

Tôi không thấy lý do tại sao điều này không hoạt động trong tất cả các trình duyệt, dường như làm việc cho tôi (chỉ với một hàm cho window.onload, sử dụng nhiều hơn và có thể có vấn đề)?

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

Để làm cho nó hoạt khi nút quay lại được nhấp là tốt, có lẽ một cái gì đó như thế này:

<body onunload=""> 
<script type="text/javascript"> 
    window.onload = function() { 
     scrollTo(0,0); 
    } 
</script> 
//content here 
</body>

Nguồn

2012-03-04 01:19:21 adeneo

Có gì trống rỗng 'onunload =" "' đang làm gì? – Sparky

Tải trọng là dành cho bfcache –

Something như dưới đây làm việc cho tôi, tạo ra một số mục có thể được tập trung và tập trung nó để cuộn trang .

Trong trường hợp này, nó sẽ cuộn trở lại đầu trang sau khi làm mới trang.

Được thử nghiệm trên IE/FF/Chrome mới nhất.

<html> 
    <head> 
     <script type="text/javascript"> 
      window.onload = function() { 
       setTimeout (function() { 
        // use both 'a' and 'button' because 'a' not work as expected on some browsers 
        document.getElementById('top_anchor').focus(); 
        document.getElementById('top_anchor_btn').focus(); 
       }, 0); 
      } 
     </script> 
    </head> 
    <body> 
     <a id="top_anchor" href="" style="width: 1px; height: 1px; position: absolute; top: 0px; left: -1000px;"></a> 
     <button id="top_anchor_btn" href="" style="width: 1px; height: 1px; position: absolute; top: 0px; left: -1000px;"></button> 

     <div> top </div> 
     <div style="width: 500px; height: 2000px; background-color: #83FEBC;"> 
      content 
     </div> 
    </body> 
</html>

Kính trọng,

Bến

Nguồn

2012-03-04 01:49:51 benbai123

Uh, tại sao setTimeout()? – AlanFoster

Chỉ cần chắc chắn làm điều đó sau, chrome cần nó. – benbai123

trình cho tôi:

// Scroll top bro 
window.onload = function() { 
setTimeout (function() { 
    scrollTo(0,0); 
}, 0); 
}

Nguồn

2012-08-09 00:20:34

Làm việc cho một trong những dự án của tôi! Cám ơn nhiều, ông bạn ! – Simon

Đây là câu trả lời hay hơn. Các setTimeout giúp bắt điều kiện cuộc đua khó xử với một số trình duyệt mà kích hoạt nhảy di chuyển sau sự kiện window.onload. – tohster

đã đồng ý, câu trả lời này là câu trả lời thực sự hiệu quả với tôi. Safari 6.1.1 trên máy Mac lúc đầu sẽ chạy mã scrollTo của tôi, sau đó nhảy xuống vị trí trước đó sau khi tải trang. làm điều này đã thắng cuộc đua. – jammypeach

Mở Chrome, ngay cả khi bạn buộc scrollTop 0 nó sẽ nhảy sau đó sau sự kiện cuộn đầu tiên.

Bạn nên ràng buộc cuộn như thế này:

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

Vì vậy, trình duyệt đang bị lừa để tin rằng nó đã được trên đầu trước khi làm mới.

Nguồn

2013-09-05 10:16:09 josetapadas

Chỉ cần để cập nhật những gì @josetapadas nói, đối với phiên bản gần đây nó sẽ là tốt hơn để sử dụng chức năng unload thay vì beforeunload này sẽ

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

Nguồn

2016-10-18 09:52:18

Ngăn chặn Làm mới 'Nhảy' với Javascript

Trả lời

Các vấn đề liên quan