滚动到页面末尾时使用 Jquery 发出警报
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3799542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alert using Jquery when Scroll to end of Page
提问by Sandhurst
Is there a way to find out page end using Jquery, so that a simple message can be displayed saying you have reached end of the page.
有没有办法使用 Jquery 找出页面末尾，以便可以显示一条简单的消息，说明您已到达页面末尾。
回答by Peter Ajtai
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.");
}
Of course you want to fire the above whenever the user scrolls:
当然，您想在用户滚动时触发上述内容：
$(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 examplethat fades in a "You're Done! Scroll to Top of Page" link when the user has scrolled to the bottom of the page.
这是一个 jsFiddle 示例，当用户滚动到页面底部时，它会淡入“你完成了！滚动到页面顶部”链接。
References:
参考：
回答by Matthew Manela
This will work and I tested it in IE 7,8,9 , FF 3.6, Chrome 6 and Opera 10.6
这会起作用，我在 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');
}
});
回答by Denny Beulen
If the above solutions don't work please check if you set your document type right:
如果上述解决方案不起作用，请检查您是否设置了正确的文档类型：
<!DOCTYPE HTML>
Took me an hour to find out :)
我花了一个小时才找到:)
回答by Gerson Lima
To avoid duplicate console.log('end of page'), you need create a setTimeout, like this:
为避免重复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);
}
});
回答by openquestions
Note for debugging: I was getting the alert on return to the top of the page(?) using jquery-1.10.2.js. Loaded jquery-1.6.4.min.js and all is well.
调试注意事项：我在使用 jquery-1.10.2.js 返回页面顶部时收到警报（？）。加载 jquery-1.6.4.min.js 一切正常。
回答by issa marie tseng
It might need tweaking to account for browsers, but something like this should do:
它可能需要调整以考虑浏览器，但应该这样做：
$(document).scroll(function()
{
var $body = $('body');
if (($body.get(0).scrollHeight - $body.scrollTop) == $body.height())
{
// display your message
}
});
