2010-09-26 38 views
9

Có cách nào để tìm hiểu trang kết thúc bằng Jquery không, để một thông báo đơn giản có thể được hiển thị cho biết bạn đã đến cuối trang.Cảnh báo bằng cách sử dụng Jquery khi Cuộn đến cuối Trang

+0

bản sao có thể có của [Xác định khi được cuộn xuống cuối trang có Javascript] (http://stackoverflow.com/questions/2817042/determining-when-scrolled-to-bottom-of-a-page-with-javascript) –

Trả lời

18

How to tell when you're at the bottom of a page:

if ( document.documentElement.clientHeight + 
     $(document).scrollTop() >= document.body.offsetHeight) 
{ 
    // Display alert or whatever you want to do when you're 
    // at the bottom of the page. 
    alert("You're at the bottom of the page."); 
} 

Tất nhiên bạn muốn bắn trên bất cứ khi nào người dùng cuộn:

$(window).scroll(function() { 
    if ( document.documentElement.clientHeight + 
      $(document).scrollTop() >= document.body.offsetHeight) 
    { 
     // Display alert or whatever you want to do when you're 
     // at the bottom of the page. 
     alert("You're at the bottom of the page."); 
    } 
}); 

Here is a jsFiddle example mà mất dần trong một "bạn đã hoàn tất! . Di chuyển đến đầu trang liên kết" khi người dùng đã cuộn đến cuối trang

Tài liệu tham khảo:

+1

Điều này không hiệu quả đối với tôi. Tôi đề nghị câu trả lời được chấp nhận cho câu hỏi SO này: http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom –

+0

@Ryan - Liệu jsFiddle không làm việc cho bạn? Bạn đang dùng trình duyệt nào? –

0

Nó có thể không cần tinh chỉnh để giải thích cho các trình duyệt, nhưng một cái gì đó như thế này nên làm:

$(document).scroll(function() 
{ 
    var $body = $('body'); 
    if (($body.get(0).scrollHeight - $body.scrollTop) == $body.height()) 
    { 
     // display your message 
    } 
}); 
6

này sẽ làm việc và tôi đã thử nghiệm nó trong IE 7,8,9, FF 3.6, Chrome 6 và Opera 10,6

$(window).scroll(function() 
{ 
    if (document.body.scrollHeight - $(this).scrollTop() <= $(this).height()) 
    { 
     alert('end'); 
    } 
}); 
2

Nếu các giải pháp trên không hiệu quả xin vui lòng kiểm tra nếu bạn thiết lập loại tài liệu phải:

<!DOCTYPE HTML> 

Đã cho tôi một tiếng đồng hồ để tìm hiểu :)

1

Để tránh trùng lặp console.log('end of page'), bạn cần tạo setTimeout, như sau:

var doc = $(document), w = $(window), timer; 

doc.on('scroll', function(){ 

    if(doc.scrollTop() + w.height() >= doc.height()){ 

     if(typeof timer !== 'undefined') clearTimeout(timer); 

     timer = setTimeout(function(){ 
      console.log('end of page'); 
     }, 50); 

    } 

}); 
+0

Hoặc bạn có thể xóa trình xử lý sự kiện sau khi thực hiện thành công đầu tiên (console.log) –

0

Lưu ý để gỡ lỗi: Tôi đã nhận được cảnh báo khi quay lại đầu trang (?) bằng cách sử dụng jquery-1.10.2.js. Tải jquery-1.6.4.min.js và tất cả là tốt.

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