說明：自從Bing搜索實現 滾動加載內容后，google,baidu都實現了類似的功能。
步驟 1： 打開Visual Studio 2010 ，新建項目www.scrollpage.com.
步驟 2：添加一個HTML文件，命名：ScrollLoadPage.html，項目引用了Jquery1.8.2框架
步驟 3：添加代碼
<!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>
<title>demo</title>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<style type="text/css">
div#Loadding { text-align: center; margin-top: 10px; display: none; font-weight: bold; color:Red; }
div.content { width: 100%; height: 900px; border-bottom: 1px solid gray; font-weight: bold; color:Red;text-align: center;}
</style>
<script type="text/javascript">
if (!NeuF) var NeuF = {};
NeuF.ScrollPage = function (obj, options, callback) {
var _defaultOptions = { delay: 500, marginBottom: 100 }; //默認配置：延遲時間delay和滾動條距離底部距離marginBottom
options = $.extend(_defaultOptions, options);
this.isScrolling = false; //是否在滾動
this.oriPos = 0; //原始位置
this.curPos = 0; //當前位置
var me = this; //頂層
var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj);
//綁定滾動事件
$obj.scroll(function (ev) {
me.curPos = $obj.scrollTop();
if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) {
if (me.isScrolling == true) return;
me.isScrolling = true;
setTimeout(function () { me.isScrolling = false; }, options.delay); //重復觸發間隔毫秒
if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos);
};
me.oriPos = me.curPos;
});
};
$(function () {
window.scrollTo(0, 0); //每次F5刷新把滾動條置頂
//marginBottom表示滾動條離底部的距離，0表示滾動到最底部才加載，可以根據需要修改
new NeuF.ScrollPage(window, { delay: 1000, marginBottom: 0 }, function (offset) {
if (offset > 0) {
$("#Loadding").show(); //加載提示
setTimeout(function () {
//這里就是異步獲取內容的地方，這里簡化成一句話，可以根據需要修改
$("#divContainer").append($("<div class='content'>第“" + ($(".content").size() + 1) + "”頁內容</div>"));
//內容獲取后，隱藏加載提示
$("#Loadding").hide();
}, 1000);
}
});
});
</script>
</head>
<body>
<div id="divContainer">
<div class="content">
這里是內容，嘗試滾動，加載下一頁內容。如果是大屏幕顯示器，<br />請把CSS div.content 高度調高，以便看到滾動效果 </div>
</div>
<div id="Loadding">
正在加載，請稍候 ...</div>
</body>
</html>
步驟 4： 在瀏覽器中查看ScrollLoadPage.html。
下面給出了項目源碼 ：
http://files.cnblogs.com/HCCZX/www.scrollpage.com.rar