Ngăn trình duyệt tự động cuộn khi làm mới

Nếu bạn đi đến một trang a và cuộn xung quanh thì làm mới trang sẽ làm mới tại vị trí bạn đã rời khỏi trang đó. Điều này thật tuyệt, tuy nhiên điều này cũng xảy ra trên các trang có vị trí neo trong url. Một ví dụ là nếu bạn nhấp vào một liên kết http://example.com/post/244#comment5và làm mới trang sau khi nhìn xung quanh, bạn sẽ không ở vị trí neo và trang nhảy xung quanh. Có cách nào để ngăn chặn điều này với javascript không? Vì vậy, bất kể điều gì bạn sẽ luôn điều hướng đến mỏ neo.

Giải pháp này không còn được khuyến nghị do những thay đổi trong hành vi của trình duyệt. Xem các câu trả lời khác.

Về cơ bản, nếu một neo được sử dụng, chúng tôi liên kết với sự kiện cuộn cửa sổ. Ý tưởng là sự kiện cuộn đầu tiên phải thuộc về việc định vị lại tự động được thực hiện bởi trình duyệt. Khi điều này xảy ra, chúng tôi tự định vị lại và sau đó loại bỏ sự kiện ràng buộc. Điều này ngăn các cuộn trang tiếp theo làm hỏng hệ thống.

$(document).ready(function() {
    if (window.location.hash) { 
        //bind to scroll function
        $(document).scroll( function() {
            var hash = window.location.hash
            var hashName = hash.substring(1, hash.length);
            var element;

            //if element has this id then scroll to it
            if ($(hash).length != 0) {
                element = $(hash);
            }
            //catch cases of links that use anchor name
            else if ($('a[name="' + hashName + '"]').length != 0)
            {
                //just use the first one in case there are multiples
                element = $('a[name="' + hashName + '"]:first');
            }

            //if we have a target then go to it
            if (element != undefined) {
                window.scrollTo(0, element.position().top);
            }
            //unbind the scroll event
            $(document).unbind("scroll");
        });
    }

});

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

Bạn nên liên kết cuộn với điều này:

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

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

Để tắt tính năng khôi phục cuộn tự động, chỉ cần thêm thẻ này vào phần đầu.

<script>history.scrollRestoration = "manual"</script>

Nó không được hỗ trợ bởi IE. Tính tương thích của trình duyệt web.

Sau nhiều lần thất bại, cuối cùng tôi đã thực hiện được mẹo. Anzo đúng ở đây vì việc sử dụng beforeunloadsẽ khiến trang chuyển lên đầu khi người dùng tải lại trang hoặc nhấp vào liên kết. Vì vậy, unloadlà cách rõ ràng để làm điều này.

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

Cách Javascript (Cảm ơn ProfNandaa ):

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

CHỈNH SỬA: 16/07/2015

Vấn đề nhảy vọt vẫn còn đó với Firefox ngay cả khi có unloadsự kiện.

Đây là một cách tiếp cận tổng quát hơn. Thay vì cố gắng ngăn trình duyệt cuộn (hoặc nhảy lên đầu như mong muốn), tôi chỉ khôi phục vị trí trước đó trên trang. Tức là tôi đang ghi lại độ lệch y hiện tại của trang trong localStorage và cuộn đến vị trí này sau khi trang đã tải xong.

function storePagePosition() {
  var page_y = window.pageYOffset;
  localStorage.setItem("page_y", page_y);
}


window.addEventListener("scroll", storePagePosition);


var currentPageY;

try {
  currentPageY = localStorage.getItem("page_y");

  if (currentPageY === undefined) {
    localStorage.setItem("page_y") = 0;
  }

  window.scrollTo( 0, currentPageY );
} catch (e) {
    // no localStorage available
}

Bạn có thể chỉ cần đặt dấu # ở cuối để trang sẽ tải ở trên cùng.

Hoạt động trên tất cả các trình duyệt, điện thoại di động và máy tính để bàn, vì nó rất đơn giản.

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

});

// Thao tác này tải trang với dấu # ở cuối.

Điều này làm việc cho tôi.

    //Reset scroll top

    history.scrollRestoration = "manual"

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

Bạn sẽ có thể.

Onload, kiểm tra xem window.location.hashcó giá trị không. Nếu có, hãy lấy phần tử có id khớp với giá trị băm. Tìm vị trí của phần tử (gọi đệ quy đến offsetTop / offsetLeft) và sau đó chuyển các giá trị đó vào window.scrollTo(x, y)phương thức.

Thao tác này sẽ cuộn trang đến phần tử mong muốn.