javascript

滚动条到底部时自己加载新的内容

方案一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>  
<html lang="en">  
    <head>  
      <meta charset="gb2312">  
      <title>滚动条到底部时自己加载新的内容</title>  
      <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>  
      <script type="text/javascript">  
          var page_num=2;  
          $(document).ready(function(){  
            $(window).scroll(function(){  
              if($(document).scrollTop()>=$(document).height()-$(window).height()){  
                var div1tem = $('#container').height()  
                var str =''  
                $.ajax({  
                    type:"GET",  
                    url:'ajaxdata.php',  
                    dataType:'json',  
                    beforeSend:function(){  
                      $('.ajax_loading').show() //显示加载时候的提示  
                    },  
                    success:function(ret){  
                     $(".after_div").before(ret) //将ajxa请求的数据追加到内容里面  
                     $('.ajax_loading').hide() //请求成功,隐藏加载提示  
                    }  
                })  
              }  
            })  
          })  
       </script>  
    </head>  
    <body>  
     <div>  
        <div style='width:100%;height:1200px'>文章内容</div>  
        <div class='after_div'></div>  
         <div class='ajax_loading' style='background:#F0F0F0;height:60px;width:100%;text-align:center;line-height:60px;font-size:18px;display:none;position:fixed;bottom:0px'>  
            <img src="img/loadinfo.net.gif"> 数据加载中  
         </div>  
     </div>  
    </body>  
</html>

方案二：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<title>jQuery实现当拉动滚动条到底部加载数据</title>  
<style type="text/css">  
*{margin:0;padding:0;}  
body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;}  
a{color:#444;text-decoration: none;}  
a:hover{color:#065BC2;text-decoration: none;}  
.clear{clear:both;}  
img{border:none;vertical-align: middle;}  
ul{list-style: none;}  
</style>  
</head>  
<body>  
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  
<script type="text/javascript">  
var totalheight = 0;  
   
function loadData()  
{  
    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());  
   
    if ($(document).height() <= totalheight)  
    {  
        //加载数据  
        $("#container").append($(document).scrollTop()+"<br/>");  
    }  
}  
   
$(window).scroll( function() {  
    console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());  
    console.log("页面的文档高度 ："+$(document).height());  
    console.log('浏览器的高度：'+$(window).height());  
    loadData();  
});  
</script>  
</head>  
<body>  
    <div id="container">  
        dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>  
    </div>  
</body>  
</html>