对于JQ实现网页翻页到底部自动加载的问题

原创 2017年04月23日 12:37:25

对于长文章,我们喜欢使用第一次加载一小部分,翻页到底部后自动加载下一页,可以给用户更好的体验。


注:用到了jquery

具体实现方法:


1.引入jquery:

 <script type="text/javascript" src="js/jquery.min.js"></script>

2.绑定翻页事件

$(window).scroll(function () {loadmore($(this));});

3.确定翻页到指定位置:

        var flag = true;                                                //标志,确定达到之后则停止,为了同时只进行一次加载操作
        function loadmore(obj) {
            var scrollTop = $(obj).scrollTop();                         //目前所在的位置
            var scrollHeight = $(document).height();                    //文章一共有多长
            var windowHeight = $(obj).height();                         //一页一共有多长
            if (scrollHeight - (scrollTop + windowHeight) <= 20) {      //20的意思是预留长度,总不能翻页到最底下才加载把~
                if (flag) {
                    alert(1);                                           //到底了在这里请求新的一页,这里可以放ajax获取新一页
                    flag = false;                                       //只执行一次
                }
            }
        }

4.大功告成
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013542549/article/details/70495510

js/jquery控制页面滑动到底部时自动加载事件

页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空...
  • sinat_29325027
  • sinat_29325027
  • 2016-11-30 11:16:11
  • 6784

js页面滚动到底部时自动加载下一页数据

一段滚动到页面底部自动加载更多数据的js代码,需要jquery.js 、 jquey.tmpl.js 支持 var Data = { PageCount: 1, PageSi...
  • gaoxu529
  • gaoxu529
  • 2016-03-09 17:09:27
  • 3954

js实现移动HTML5页面滑动到最底部触发内容加载

首先要清楚3个定义: 文档高度 这是整个页面的高度 可视窗口高度 这是你看到的浏览器可视屏幕高度 滚动条滚动高度 滚动条下滑过的高度   所以, 当 文档高...
  • wangpf1992
  • wangpf1992
  • 2016-11-08 10:56:03
  • 8947

JS/JQ实现滚动调默认最底部

1、让scrollTop(滚动条的垂直位置)== $("tbody").height()元素的高度(常用) JS:div.scrollTop = div.scrollHeight; JQ:$("#...
  • acm765152844
  • acm765152844
  • 2016-03-09 12:37:26
  • 6859

jQuery 自动翻页与数据同步

翻页原理 通过计算这几个参数: scrollTop()>=jQuery(document).height()-jQuery(window).height() 就可以知道已经滚动到底端了 jQu...
  • TLD_DLT
  • TLD_DLT
  • 2016-11-25 17:25:32
  • 394

jquery实现自动分页插件

  • 2015年08月21日 11:18
  • 35KB
  • 下载

jquery自动播放图片

  • 2012年07月02日 14:26
  • 3KB
  • 下载

页面滚动到底部自动加载数据

  • 2015年04月29日 10:27
  • 27KB
  • 下载

Jquery鼠标滚动到页面底部自动加载更多内容,使用分页

滚屏加载--无刷新动态加载数据技术的应用-www.corange.cn #container{margin:10px auto;width: 660px; border: 1px solid #99...
  • jimlong
  • jimlong
  • 2014-11-15 00:54:05
  • 24834

Js(JQuery)实现滚动到底部加载更多(翻页)

$(window).scroll(function () { var scrollTop = $(this).scrollTop();        var scrollHeight = $(do...
  • Elite_1989
  • Elite_1989
  • 2015-10-13 10:57:23
  • 3282
收藏助手
不良信息举报
您举报文章:对于JQ实现网页翻页到底部自动加载的问题
举报原因:
原因补充:

(最多只允许输入30个字)