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 = "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>