jQuery实现滚动到底部时自动加载更多的方法示例


Posted in jQuery onFebruary 18, 2018

本文实例讲述了jQuery实现滚动到底部时自动加载更多的方法。分享给大家供大家参考,具体如下:

这里利用AJAX,实现滚动到底加载数据功能:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="js/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      AddSth();
    });
    $(function () {
      $(".main").unbind("scroll").bind("scroll", function (e) {
        var sum = this.scrollHeight;
        if (sum <= $(this).scrollTop() + $(this).height()) {
          AddSth();
        }
      });
    });
    function AddSth() {
      $.ajax({
        type: 'POST',
        url: "index.aspx/ReturnSth",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        //data: "",
        success: function (data) {
          json = $.parseJSON(data.d);
          for (var i in json) {
            var tbBody = "<ul><li>" + json[i].sth + "</li></ul>";
            $(".main").append(tbBody);
          }
          $(".main").append("<hr />");
        }
      });
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <div>下拉加载更多</div><br />
    <div class="main" style="border: 1px solid red; height: 700px; overflow: auto;"></div>
  </form>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 #jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 #jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 #jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 #jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 #jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 #jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 #jQuery
You might like
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python编程实现蚁群算法详解
2017/11/13 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
美国零售商店:Blue&Cream
2017/04/07 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
财务部副经理岗位职责
2014/03/14 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
幼师自荐信范文
2015/03/06 职场文书
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle