要实现滚动条滚到底部自动加载后续内容到内容到底部的功能,用jQuery非常方便的,只要知道什么时候滚动到了底部就好办了。

$(document).scrollTop() //获取垂直滚动条到顶部的距离
$(document).height()//整个网页的高度
$(window).height()//浏览器窗口的高度

文档的高度减去窗口的高度就是滚动条可滚动的范围了。那么

$(window).scrollTop() + $(window).height()  >= $(document).height()

滚动条就到底部了,我们只要在$(window).scroll()中判断和加载内容就可以了:

$(function(){$(window).scroll(function() {//当内容滚动到底部时加载新的内容if ($(this).scrollTop() + $(window).height() + 20 >= $(document).height() && $(this).scrollTop() > 20) {//当前要加载的页码LoadPage(currPage);}});
});

代码中的20是我设置的偏移量,如果底部有其它内容,要在看到底部内容时就加载,而不是必须滚动到底部,就需要这个偏移量了,$(this).scrollTop() > 20是为了不让页面还没有滚动就触发加载;至于页面要加载的内容当然是AJAX处理了,都在LoadPage()中处理就行了!

源自:http://www.playcode.cn/jquery-shi-xian-gun-dong-dao-di-bu-zi-dong-jia-zai-nei-rong-gun-dong-fan-ye.html

新浪微博网页自动底部加载的效果很酷吧?其实这种叫做“无限滚动的翻页技术”,当你页面滑到列表底部时候无需点击就自动加载更多的内容。

其实有很多jQuery的插件都已经实现了这个效果,我们来介绍几个吧!

1、jQuery ScrollPagination

jQuery ScrollPagination plugin 是一个jQuery 实现的支持无限滚动加载数据的插件。

地址:http://andersonferminiano.com/jqueryscrollpagination/

他的demo下载:http://andersonferminiano.com/jqueryscrollpagination/jqueryscrollpagination.zip

实例代码:

$(function(){
$('#content').scrollPagination({
'contentPage': 'democontent.html', // the url you are fetching the results
'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
'scrollTarget': $(window), // who gonna scroll? in this example, the full window
'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
'beforeLoad': function(){ // before load function, you can display a preloader div
$('#loading').fadeIn();
},
'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
$('#loading').fadeOut();
var i = 0;
$(elementsLoaded).fadeInWithDelay();
if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
$('#nomoreresults').fadeIn();
$('#content').stopScrollPagination();
}
}
});
// code for fade in element by element
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
});

2、 jQuery Screw

Screw (scroll + view) 是一个 jQuery 插件当用户滚动页面的时候加载内容,是一个无限滚动翻页的插件。

官方地址:https://github.com/jasonlau/jQuery-Screw

3. AutoBrowse jQuery Plugin

Autobrowse jQuery Plugin 插件在用户滚动页面的时候自动通过 Ajax 加载更多内容,使用浏览器内置缓存。

官方地址:https://github.com/msjolund/jquery-esn-autobrowse

源自:http://www.makeyuan.com/2014/02/21/1080.html

jQuery插件实现网页底部自动加载-类似新浪微博相关推荐

  1. JS滚动条到网页底部自动加载更多内容

    2019独角兽企业重金招聘Python工程师标准>>> <html> <head> <meta charset="gb18030"  ...

  2. C语言界面列表的滑动效果,jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)...

    本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/ ...

  3. jquery仿邮箱文本输入框自动加载邮箱后缀

    jquery仿邮箱文本输入框自动加载邮箱后缀 在像百度这样的网站注册时,你会看到输入邮箱会出现自动给用户输入补全主流邮箱.这种对于增加用户体验的小例子已司空见惯.正好看到人家写的这种js功能.还挺不错 ...

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

    一段滚动到页面底部自动加载更多数据的js代码,需要jquery.js . jquey.tmpl.js 支持 var Data = { PageCount: 1, PageSize: 30, IsCom ...

  5. 仿新浪微博实现ListBox下拉刷新和到底部自动加载

    一.下拉刷新 下拉刷新实现思路: 1.定义一个PullDownToRefreshPanel容器控件.为它添加3种状态模板,分别是PullingDownTemplate,ReadyToReleaseTe ...

  6. 探索SwipeRefreshLayout配合自定义ListView完成下拉刷新、滑到底部自动加载更多

    在Android开发过程中经常需要实现上下拉刷新功能,Google推出的下拉刷新控件SwipeRefreshLayout(彩虹条),由于官方版本只有下拉刷新而没有上拉加载更多的功能,很多人也尝试在这个 ...

  7. html5到底部自动加载,列表滚动到底部自动加载更多

    列表滚动到底部自动加载更多 在移动端,经常会用到列表滚动到底部,拉一下加载更多,或者点一下加载更多等等,今天我说说我的一个实现的思路. 通过监听列表的滚动时间,当用户滚动到列表的底部,并停留一小段时间 ...

  8. 滚动到页面底部自动加载内容

    上网时经常会看到许多酷炫的网页,其中给我印象较深刻的是鼠标滚动到页面底部时会自动加载内容,一直都很好奇是怎么样做到的,于是自己也尝试着写了一下. 先上个完整代码吧: <!DOCTYPE html ...

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

    今天跟大家分享的是大麦UWP客户端,在分类.订单或是搜索时都用到的一个小技巧,技术粗糙大神勿喷. 以大麦分类举例,默认打开的时候,会为用户展示20条数据,当用户滚动鼠标或者使用手势将列表滑动到倒数第二 ...

最新文章

  1. python统计列表内元素个数
  2. 揭开“云杀毒”的真面目
  3. mysql 异常关机后 无法查数据_MySQL数据库非法关机造成数据表损坏怎么排查 | 学步园...
  4. c# dataGridView 设置
  5. 【云计算的1024种玩法】云端打造家庭文件备份中心
  6. Excel 用于批量把单元格设置为文本格式保存的数字的宏
  7. spring--打印hello--注解component--自动创建对象
  8. CentOS环境下,gdb调试中出现:Missing separate debuginfos, use: debuginfo-install.....的问题
  9. Linux下高速缓存DNS的配置
  10. PAT 甲级 1004
  11. 674. 最长连续递增序列
  12. Tomcat servers.xml 无注释版
  13. mysql backup user_mysql备份常见命令
  14. 21天学通c语言总结(3)
  15. 这款神器,IDM随意下载任意网页音频视频文件!
  16. adb 配置自动获取时间 使用GPS提供的时间 使用网络提供的时间
  17. git添加文件到版本库中
  18. linux嵌入式reboot不生效,Embeded linux之reboot
  19. LeetCode 108. 将有序数组转换为二叉搜索树
  20. 【遇到的问题】VMware Workstation 无法连接到虚拟机。请确保您有权运行该程序、访问该程序使用的所有目录以及访问所有临时文件目录。

热门文章

  1. 数学 —— 计算几何 —— 平面分割问题
  2. 信息学奥赛C++语言: 求正整数2和n之间的完全数
  3. 3.1 SE11创建域
  4. 组装微型计算机时 下列哪些部件,2016年9月计算机三级网络技术考试试题及答案...
  5. python flask restful api_python之restful api(flask)获取数据
  6. hat怎么安装mysql_Red Hat Enterprise Linux中怎么安装Mysql+apache+php+zend
  7. PyCharm配置Docker
  8. 操作系统中的一些基本概念
  9. extjs4.2 前端读取对象的方法
  10. async js 返回值_获取JavaScript异步函数的返回值