<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://yanpinquan.blog.163.com/blog/../jquery.min.js"></script>
</head>
<body>
<div id="table">
<table width="100%" border="0" cellpadding="10" cellspacing="10">
<tr>
<td align="center">
<img class="scrollLoading" src="http://yanpinquan.blog.163.com/blog/images/1.jpg" width="300" height="120" />
</td>
</tr>
<tr>
<td align="center">
<img class="scrollLoading" src="http://yanpinquan.blog.163.com/blog/images/2.jpg" width="300" height="120" />
</td>
</tr>
<tr>
<td align="center">
<img class="scrollLoading" src="http://yanpinquan.blog.163.com/blog/images/3.jpg" width="300" height="120" />
</td>
</tr>
<tr>
<td align="center">
<img class="scrollLoading" src="http://yanpinquan.blog.163.com/blog/images/4.jpg" width="300" height="120" />
</td>
</tr>
<tr>
<td align="center">
<img class="scrollLoading" src="http://yanpinquan.blog.163.com/blog/images/5.jpg" width="300" height="120" />
</td>
</tr>
<tr>
<td align="center">
<img class="scrollLoading" src="http://yanpinquan.blog.163.com/blog/images/6.jpg" width="300" height="120" />
</td>
</tr>
<tr>
<td align="center">
<img class="scrollLoading" src="http://yanpinquan.blog.163.com/blog/images/7.jpg" width="300" height="120" />
</td>
</tr>
<tr>
<td align="center">
<img class="scrollLoading" src="http://yanpinquan.blog.163.com/blog/images/8.jpg" width="300" height="120" />
</td>
</tr>
</table>
</div>
<div id="txt"></div>
<script type="text/javascript">
$(window).scroll(function(){
var documentTop = $(document).scrollTop();
var windowHeight = $(window).height();
var documentHeight = $(document).height();
//var txt = "windowHeight:"+windowHeight + " |*$*| documentTop:"+documentTop + " |*$*| documentHeight:"+documentHeight;
//當 documentTop >= (documentHeight-windowHeight) 說明滾動條已經滾動到底部了
if(documentTop >= (documentHeight-windowHeight)){
var tableTxt = $("#table").html();
$("#txt").append("<hr>" + tableTxt);
}
})
</script>
</body>
</html>
$(document).scrollTop() 獲取垂直滾動的距離
即當前滾動的地方的窗口頂端到整個頁面頂端的距離
$(document).scrollLeft()
這是獲取水平滾動條的距離
要獲取頂端 只需要獲取到
scrollTop()==0的時候就是頂端了 要獲取底端
只要獲取scrollTop()>=（$(document).height()-$(window).height()）就可以知道已經滾動到底端了 $(document).height()
//是獲取整個頁面的高度 $(window).height()
//是獲取當前 也就是你瀏覽器所能看到的頁面的那部分的高度
