在一些需求中，需要在用户滚动到浏览器底部时加载新的内容。笔者这里介绍如何使用Jquery判断用户是否浏览到网页底部。在理解后面的知识点之前，笔者在这里先介绍几个概念。$(窗口).高度();//用于获取浏览器显示区域的高度$(window).width();//用于获取浏览器显示区域的宽度$(document.body).height();//获取页面文档的高度$(document.body).width();//获取页面文档的宽度$(document).scrollTop();//获取垂直滚动条到顶部的垂直距离$(document).scrollLeft();//获取水平滚动条向左的水平距离。通过以上知识点可以知道：浏览器显示区域的高度+垂直滚动条到顶部的距离<=网页的高度。有了这个结论，就很容易实现了。下面代码实现判断用户是否浏览到网页底部。$(window).scroll(function(){varh=$(document.body).height();//网页文档的高度varc=$(document).scrollTop();//滚动的高度barfromthetopofthewebpagevarwh=$(window).height();//页面可视化区域的高度if(Math.ceil(wh+c)>=h){alert("我到了底部");}})如果需要判断用户是否已经浏览到某个元素，那么只需要将上面网页文档的高度替换为某个元素到网页顶部的距离即可。例如：$(window).scroll(function(){varh=$("#div").offset().top;//id为div的元素到网页顶部的距离varc=$(document).scrollTop();//滚动条距离网页顶部的高度varwh=$(window).height();//页面可视区域的高度if(Math.ceil(wh+c)>=h){alert("我已经到底啦");}})这里需要读者注意，在判断条件中，wh+c是大于的最小整数或等于数。经过笔者的测试，在IE7、8、9、11上都没有问题。接下来，笔者将上述代码封装为插件。(function($){//backcall是回调函数，count表示回调函数执行的次数，count只在元素超出屏幕范围时起作用$.fn.inBottom=function(backcall){//判断当前元素是否在当前屏幕可视化区域内if(this.offset().top>=$(window).height()){this.inScroll(backcall,count);}else{this.inWindow(backcall);}};//直接加载回调函数$.fn.inWindow=function(backcall){backcall();};//滚动监听滑块，当元素滚动到屏幕底部时，加载回调函数$.fn.inScroll=function(backcall,count){var$this=this;$(window).scroll(function(){//获取这个元素到文档顶部的距离varawayDocTop=$this.offset().top;//获取滚动条topvarsTop=$(document).scrollTop();//获取可视化窗口的高度varwh=$(window).height();if(Math.ceil(wh+sTop)>=awayDocTop){if(count>0){backcall();count--;}};});};})(jQuery);那么读者介绍完上面的插件文件后，就可以通过类似下面的代码来调用了。$("#div").inBottom(function(){alert("我被叫回来了");},1);
