最近在研究滚动条到底部自动加载内容的代码，可惜找了几天找到的都是静态加载，动态加载的要么就是PHP的，要么就是ASP.NET的，完全看不懂，虽然知道要先把数据转成JSON格式，然后结合AJAX异步加载到当前页，可是对于实际代码这么写却是一头雾水。还是先放放吧，等以后有时间再折腾。整理了一个最简单的静态加载存着先，免得以后会用到。

<script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

var range = 10; //距下边界长度/单位px

var elemt = 300; //插入元素高度/单位px

var maxnum = 20; //设置加载最多次数

var num = 1;

var totalheight = 0;

var main = $("#content"); //主体元素

$(window).scroll(function(){

var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)

//console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());

//console.log("页面的文档高度 ："+$(document).height());

//console.log(′浏览器的高度：′+$(window).height());

totalheight = parseFloat($(window).height()) + parseFloat(srollPos);

if(($(document).height()-range) <= totalheight && num != maxnum) {

main.append("<div style=′border:1px solid tomato;margin-top:20px;height:"+elemt+"px;′>加载内容："+num+"；滚动条距顶部距离（超出页面的高度）："+srollPos+"</div>");

num++;

}

});

});

</script>

<div id="content">

<div>页面下拉自动加载内容演示</div>

<div style="border:1px solid tomato;margin-top:20px;height:800px">原内容</div>

</div>