Question

有没有办法使用Jquery查找页面结束，这样就可以显示一条简单的消息，说明你已到达页面的末尾。

Answer 1

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.");
}

当然，只要用户滚动，你就想触发上面的内容：

$(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 会逐渐淡出“您已完成！滚动到页面顶部”链接。

参考文献：

Answer 2

这将有效，我在IE 7,8,9，FF 3.6，Chrome 6和Opera 10.6中进行了测试

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

Answer 3

如果上述解决方案无效，请检查您是否正确设置了文档类型：

<!DOCTYPE HTML>

花了我一个小时才发现：）

Answer 4

为避免重复console.log('end of page')，您需要创建一个setTimeout，如下所示：

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);

    }

});

Answer 5

可能需要调整以考虑浏览器，但这样的事情应该：

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

Answer 6

调试注意事项：我在返回页面顶部（？）时收到警报 jQuery的1.10.2.js。加载了jquery-1.6.4.min.js，一切都很好。

滚动到页面末尾时使用Jquery进行警报

6 个答案: