jQuery怎么实现判断滚动条滚动到document底部

这篇文章将为大家详细讲解有关jQuery怎么实现判断滚动条滚动到document底部，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

本文实例讲述了jQuery实现判断滚动条滚动到document底部的方法。分享给大家供大家参考，具体如下：

滚动条没有实际的高度。只是为了呈现效果才在外型上面有长度。

在js当中也没有提供滚动条的高度API。

参考了网上有关资料：判断滚动条到底部的基本逻辑是滚动条滚动的高度加上视口的高度，正好是document的高度，公式表示为

滚动条滚动的高度+浏览器视口的高度>=document的高度。

参考网上资料，具体代码如下：

//滚动条在Y轴上的滚动距离 function getScrollTop() {     var scrollTop = 0,       bodyScrollTop = 0,       documentScrollTop = 0;     //兼容谷歌     if (document.body) {     bodyScrollTop = document.body.scrollTop;   }     //兼容火狐     if (document.documentElement) {     documentScrollTop = document.documentElement.scrollTop;   }        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;     return scrollTop; } //文档的总高度 function getScrollHeight() {     var scrollHeight = 0,       bodyScrollHeight = 0,       documentScrollHeight = 0;     //兼容谷歌     if (document.body) {       bodyScrollHeight = document.body.scrollHeight;     }     //兼容火狐     if (document.documentElement) {       documentScrollHeight = document.documentElement.scrollHeight;     }     scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;     return scrollHeight; } //浏览器视口的高度 function getWindowHeight() {     var windowHeight = 0;     windowHeight = document.documentElement.clientHeight;     return windowHeight; } window.onscroll = function() {     if (getScrollTop() + getWindowHeight() == getScrollHeight()) {       alert("you are in the bottom!");     } };

jquery实现代码：

$(window).scroll(function(){   var scrollTop = $(this).scrollTop();   var scrollHeight = $(document).height();   var windowHeight = $(this).height();   if(scrollTop + windowHeight == scrollHeight){     alert("you are in the bottom");   } });

代码测试有效果。

关于“jQuery怎么实现判断滚动条滚动到document底部”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。