滚动到页面结束时使用jQuery的警报

StackOverflow https://stackoverflow.com/questions/3799542

  •  05-10-2019
  •  | 
  •  

题

是否有一种方法可以使用jQuery查找页面结尾，以便可以显示一条简单的消息，说明您已经到达页面的尽头。

有帮助吗？

解决方案

如何分辨您何时在页面的底部: 

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

这是一个JSFIDDLE示例 当用户滚动到页面底部时，这会在“您完成！滚动到页面顶部”链接中逐渐消失。

参考：

其他提示

这将起作用，我在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');
    }
});

如果以上解决方案不起作用，请检查是否正确设置文档类型：

<!DOCTYPE HTML>

我花了一个小时才能找出答案:)

避免重复 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);

    }

});

它可能需要进行调整才能说明浏览器，但是类似的事情应该做：

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

注意调试：我使用jquery-1.10.2.js返回到页面的顶部时获得了警报。加载JQuery-1.6.4.min.js，一切都很好。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top