您的位置:首页 > Web前端 > JQuery

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

2017-04-23 12:37 323 查看
对于长文章,我们喜欢使用第一次加载一小部分,翻页到底部后自动加载下一页,可以给用户更好的体验。

注:用到了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.大功告成
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Html Jquery 底部加载