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

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


注:用到了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.大功告成

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值