JS 判断滚动底部并加载更多效果。。。。。。。。。

<html lang="zh-cn">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>js网页滚动条滚动事件 </title>

<style type="text/css">

#top_div{

    position:fixed;

    bottom:80px;

    right:0;

    display:none;

}

</style>

<script type="text/javascript">

window.onscroll = function(){

    var t = document.documentElement.scrollTop || document.body.scrollTop;

    var top_div = document.getElementById( "top_div" );

    var loading = document.getElementById("loading");

          vv.innerHTML="document.body.scrollHeight:"+document.body.scrollHeight+" body offsetHeight:"+document.body.offsetHeight;

        //scrollTop + clientHeight == scrollHeight

    if( document.body.scrollTop+ document.body.clientHeight >= document.body.scrollHeight) {

        top_div.style.display = "inline";

        if(loading.style.display != "inline"){

             loading.style.display = "inline";

             count.value=(1+ parseInt(count.value));

             setTimeout("addItem(count.value);",2000);

         }

    }

}

 function addItem(i){

   for(var j=0;j<10;j++){

    var box = document.createElement("div");

		content.appendChild(box);

		box.style.cssText = "width:300px;font-size:12px;";

                box.innerHTML="<a href='#'>..........."+ i+"</a>"

       }

       loading.style.display = "none";

   }

</script>

</head>

<body>

<div id="vv"></div>

<br />

<a name="top">顶部<a>

<div id="top_div"><a href="#top">返回顶部</a></div>

<br />

<div id="content">

<a href="#">...........</a>

</div>

<br />

这里尽量多些<br />以便页面出现滚动条

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="loading" style="position:fixed;bottom:20px;line-height:40px;background-color: #F00;color: #fff; display:none;">

  loaing............................................................................................................<input id="count" type='text' value="0"/>

</div>

</body>

</html>