有些需求中，需要当用户滚动到浏览器底部的时候，再加载新的内容。笔者在这里介绍如何使用Jquery判断用户是否已经浏览到网页的底部了。

在了解下面的知识点之前，笔者这里先介绍几个概念。

$(window).height(); //用于获取浏览器显示区域的高度

$(window).width(); //用于获取浏览器显示区域的宽度

$(document.body).height(); //获取页面文档的高度

$(document.body).width(); //获取页面文档的宽度

$(document).scrollTop(); //获取垂直滚动条到顶部的垂直距离

$(document).scrollLeft(); //获取水平滚动条到左边的水平距离

通过上面的知识点，可以知道：浏览器显示区域的高度+垂直滚动条距离顶部距离<=网页的高度。

有了这个结论，那么实现起来就容易了。下面的代码实现了，判断用户是否浏览到了网页的底部。

			$(window).scroll(function(){ 				var h=$(document.body).height();//网页文档的高度 				var c = $(document).scrollTop();//滚动条距离网页顶部的高度 				var wh = $(window).height(); //页面可视化区域高度  				if (Math.ceil(wh+c)>=h){ 				    alert("我已经到底部啦"); 				} 			})

如果需要判断用户是否已经浏览到某个元素的话，那么只需要把上面的网页文档高度，换成某一个元素距离网页顶部的距离就可以了。例如：

			$(window).scroll(function(){ 				var h=$("#div").offset().top;//id为div的元素距离网页顶部的距离 				var c = $(document).scrollTop();//滚动条距离网页顶部的高度 				var wh = $(window).height(); //页面可视化区域高度  				if (Math.ceil(wh+c)>=h){ 				    alert("我已经到底部啦"); 				} 			})

在这里读者需要注意，判断条件中，wh+c取得是满足大于等于该数字的最小整数。经过笔者的测试，在IE7、8、9、11上都没有问题。

接下来笔者把上面的代码封装一下。

	//如果ele元素出现在浏览器的底部，回调backcall方法,repeatCounts表示回调的次数 	function inBottom(ele,backcall,repeatCounts){ 		var count=repeatCounts; 		$(window).scroll(function(){ 			//获得这个元素到文档顶部的距离 			var awayDocTop=ele.offset().top; 			//获得滚动条的top 			var sTop=$(document).scrollTop(); 			//获得可视化窗口的高度 			var wh=$(window).height(); 			 		    if(Math.ceil(wh+sTop)>=awayDocTop){ 		    	if(count>0){ 			    	backcall(); 			    	count--; 		    	} 			}; 		}); 	}

然后读者，就可以通过类似于下面的代码调用了。

	inBottom($("#div"),function(){ 		alert("我被回调了"); 	},1);