Làm cách nào để biết một trang đã nhảy vào neo (#) trong javascript?

Question

Tôi có một số javascript có thể xuất hiện trên nhiều trang khác nhau. Đôi khi, những trang đó đã được truy cập thông qua một URL chứa tham chiếu anchor (ví dụ # comment-100). Trong những trường hợp này, tôi muốn javascript trì hoãn việc thực thi cho đến sau khi cửa sổ đã nhảy lên. Ngay bây giờ tôi chỉ sử dụng một sự chậm trễ nhưng đó là khá hackish và rõ ràng là không hoạt động trong mọi trường hợp. Tôi dường như không thể tìm thấy bất kỳ loại sự kiện DOM nào tương ứng với cửa sổ "nhảy".

Bên cạnh sự chậm trễ đơn giản, giải pháp duy nhất tôi đưa ra là để JS tìm kiếm neo trong URL và nếu tìm thấy nó, hãy xem các thay đổi trong scrollTop. Nhưng điều đó dường như lỗi, và tôi không chắc chắn 100% rằng kịch bản của tôi sẽ luôn bị sa thải trước khi việc cuộn xảy ra vì vậy nó sẽ chỉ chạy nếu người dùng cuộn trang này theo cách thủ công. Dù sao đi nữa, tôi không thực sự thích giải pháp và muốn điều gì đó hướng sự kiện hơn. Bất kỳ đề xuất?

Chỉnh sửa để làm rõ:

Tôi không cố gắng để phát hiện một sự thay đổi băm. Lấy ví dụ sau đây:

1. trang index.php chứa một liên kết đến post.php # comment-1
2. Người dùng nhấp vào liên kết để post.php # comment-1
3. post.php # comment- 1 tải
4. $ (document) .ready cháy
5. Không lâu sau đó cuộn xuống để duyệt # comment-1

tôi đang cố gắng để chắc chắn phát hiện khi bước 5 sẽ xảy ra.

Answer 1

Có vẻ như bạn có thể sử dụng window.onscroll. Tôi đã thử nghiệm mã này ngay bây giờ:

<a name="end" /> 
<script type="text/javascript"> 
    window.onscroll = function (e) { 
     alert("scrolled"); 
} 
</script> 

có vẻ như hoạt động.

Chỉnh sửa: Hm, nó không hoạt động trong IE8. Nó hoạt động trong cả Firefox và Chrome.

Chỉnh sửa: jQuery có trình xử lý .scroll(), nhưng nó sẽ kích hoạt trước khi cuộn trên IE và dường như không hoạt động đối với Chrome hoặc Firefox.

Answer 2

Bạn có thể kiểm tra window.onhashchange trong trình duyệt hiện đại. Nếu bạn muốn tương thích chéo, hãy xem http://benalman.com/projects/jquery-hashchange-plugin/

Trang này cũng có thêm thông tin về window.onhashchange.

EDIT: Bạn về cơ bản thay thế tất cả các tên neo với một quy ước liên kết tương tự, và sau đó sử dụng .scrollTo để xử lý các di chuyển:

$(document).ready(function() { 
    // replace # with #_ in all links containing # 
    $('a[href*=#]').each(function() { 
     $(this).attr('href', $(this).attr('href').replace('#', '#_')); 
    }); 

    // scrollTo if #_ found 
    hashname = window.location.hash.replace('#_', ''); 
    // find element to scroll to (<a name=""> or anything with particular id) 
    elem = $('a[name="' + hashname + '"],#' + hashname); 

    if(elem) { 
     $(document).scrollTo(elem, 800,{onAfter:function(){ 
     //put after scroll code here }}); 
    } 
}); 

Xem jQuery: Scroll to anchor when calling URL, replace browsers behaviour để biết thêm.

Answer 3

Để phát hiện khi các phần tử xuất hiện trên màn hình, sử dụng appear plugin:

$('#comment-1').appear(function() { 
    $(this).text('scrolled'); 
});