网页滚动到底部自动加载

<html>
    <head>
        <style type="text/css">
#top_div{
    position:fixed;
    bottom:80px;
    right:0;
    display:none;
}
</style>
<script type="text/javascript">
var i=0;
window.onscroll = function(){
    var t = document.documentElement.scrollTop || document.body.scrollTop;
    var top_div =document.getElementById("top_div");
    if( t >= 300 ) {
        top_div.innerHTML=
        "zonggao:"+document.body.offsetHeight+"<br>"
        +"zheli"+document.body.scrollTop+"<br>"
        +document.documentElement.clientHeight+"<br>"
        +(document.body.clientHeight+document.body.scrollTop)+"<br>";
        top_div.style.display = "inline";
    } else {
        top_div.style.display = "none";
    }
    if((document.body.clientHeight+document.body.scrollTop) >=document.documentElement.clientHeight)
    {
        document.getElementById("qq").innerHTML+="这里尽量多些<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 /><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 /><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 /><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 /><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 /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />以便页面出现滚动条，限于篇幅本文此处略去"+(i++);
        }
}

</script>
    </head>

    <body>

<a name="top">顶部<a>
<div id="top_div"><a href="#top">返回顶部</a></div>
<br />
<br />
<div id="qq">
这里尽量多些<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 /><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 /><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 /><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 /><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 /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />以便页面出现滚动条，限于篇幅本文此处略去
</div>
    </body>
</html>

时间： 2024-08-08 15:27:50

网页滚动到底部自动加载的相关文章

页面滚动到底部自动加载下一页功能的实现

页面滚动到底部自动加载下一页功能的实现,效果见本博首页 1.endlesspage.js文件内容 var gPageSize = 10; var i = 1; //设置当前页数,全局变量 var finished = false; var dataUrl = ''; $(function () { //根据页数读取数据 function getData(pagenumber) { //console.log(i); $.get(dataUrl, { pagesize: gPageSize, p:

关于JQuery实现滚动到底部自动加载中应当注意的地方

在滚动到底部自动加载时常常用到以下代码 container.bind('scroll', function(){ if(container.scrollTop() + container.height() >= container.prop("scrollHeight")){ loadNextPage(); } }); 其中container.prop("scrollHeight") 就相当于 container.get(0).scrollHeight 用于获

listview滚动到底部自动加载数据

在android中listvieww加载数据,有的是分批加载,比如每次加载20条,100条就要加载5次,如果一次性加载100条,listview加载就变的慢,如果是有图片的话,一时浪费流量,二是item中带图片会出现错位的问题,listview加载数据目前好多app做法一:分批加载滑动到底部自动更新二:滑动到底部手动的点击加载更多三:下拉刷新+底部加载更多今天就讲下listview滑动到底部自动更新分析:监听listview的滑动事件,判断listview是否滑动到底部,然后去加载

[转]ListView滚动到底部自动加载数据

转自:http://blog.csdn.net/shineflowers/article/details/41744241 在Android中有很多时候会选择用ListView加载数据,有的是分批加载,比如每次加载20条,100条就要加载5次,如果一次性加载100条,ListView加载就会变慢,如果是有图片的话,一是浪费流量,二是item中带图片会出现错位的问题l,ListView加载数据目前好多App的做法 1. 分批加载,滑动到底部自动更新 2. 滑动到底部,手动的点击加载更多 3. 下拉

滚动到底部自动加载新内容

$(window).on('scroll',function(){ if($(window).height()+$(window).scrollTop()>=$(document).height()){ console.log("到达底部"); //这里是要加载的数据 } }); console.log('整个网页的高度'+$(document).height()); //整个网页的高度console.log('浏览器可视窗口的高度'+ $(window).height()) ;

Android数据分批加载-滑动到底部自动加载列表

Android数据分批加载-滑动到底部自动加载列表 2014年5月9日本博文介绍如何进行数据分批加载,在应用开发当中会经常使用到ListView,点击更多加载数据是我们经常简单,为了提供用户体验,当用户将列表滚动到底部自动加载数据,这样的形式用得比较多. 下面给大家提供的例子是,每次模拟20条数据,滑动到底部时再请求20条数据直到请求到限定页数为止具体代码实现: /08_Datapageload/src/com/wwj/datapageload/MainActivity.java packa

分享大麦UWP版本开发历程-03.GridView或ListView 滚动底部自动加载后续数据

今天跟大家分享的是大麦UWP客户端,在分类.订单或是搜索时都用到的一个小技巧,技术粗糙大神勿喷. 以大麦分类举例,默认打开的时候,会为用户展示20条数据,当用户滚动鼠标或者使用手势将列表滑动到倒数第二行的位置时,自动加载后续20条数据.提高启动速度的同时稍稍节省用户的流量. 其他的就不说了,直接进入代码阶段. Step1,界面部分很简单,我放弃了Gridvew自己的滚动,在外面包上了一个ScrollViewr,监听ViewChanged事件(这样代码比较简单,直接用GridView内部的数据变化

当滚动条滚动到页面底部自动加载增加内容的js代码

这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码代码如下://获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentEle

手机H5页面，滑动到底部自动加载下一页内容

做公众号项目中有如下场景,一个H5页面有列表数据,不考虑一次加载所有数据,故需要分页操作,解决方案为滑动到底部自动加载下一页内容.直接在H5的js当中实现. 主要使用jquery的scroll()方法: 当用户滚动指定的元素时,会发生 scroll 事件. scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口). scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数. 代码如下: $(window).scroll(function()