JQuery滚动条分页加载信息

最新推荐文章于 2022-11-20 10:23:33 发布
最新推荐文章于 2022-11-20 10:23:33 发布
阅读量8k 收藏 4
点赞数
分类专栏： JavaScript 文章标签： jquery滚动条分页 scroll
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KingCruel/article/details/8286783
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>滚动条拖到底自动翻页</title>
    <script src="/JS/jquery-latest.pack.js" type="text/javascript"></script>
    <script src="/JS/jquery-latest.min.js" type="text/javascript"></script>
    <script src="/JS/Control.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery.extend({
            scrollPage: function (p, f) {
                var n = c = t = h = new Number;
                $(function () {
                    $(window).scroll(function () {
                        if (n == p) { $(this).unbind("scroll"); }
                        c = document.documentElement.clientHeight;
                        t = $(document).scrollTop();
                        h = $(document).height();
                        if (h - t - c == 0) {
                            f();
                            if (p > 0) n += 1;
                        }
                    });
                });
            }
        });
        $.scrollPage(-1, function () {
            //$("body").append("<div style=\"height:200px;line-height:200px;color:#f00;\">www.wutongxia.com提醒您：这是加载进来的分页数据</div>");
            $.ajax({
                url: "/Handler/JQueryJson.ashx",
                type: 'POST',
                data: {
                    action: 'GetCountry',
                    id: '123'
                },
                success: function (responseText) {
                    var temp = "<div style=\"height:100px;font-size:xx-large;color:#f00;background-color:Blue;\">";
                    var re = responseText.toJson();
                    $.each(re, function (i, c) {
                        temp += c.title + ";";
                    });
                    temp += "</div><div style=\"height:10px;\"></div>";
                    $("body").append(temp);
                }
            });
        });
    </script>
</head>
<body>
    <h1>
        滚动条拖到底自动翻页</h1>
    <p style="">
        <strong>$.scrollPage(data,fn)</strong><br>
        <em>data</em>(Number)<br>
        -1一直翻页;0不翻页;n翻n页<br>
        <em>fn</em>(Function)<br>
        当滚动条拖到底部时要执行的函数
    </p>
    <p>
        -----------------------可爱的分割线----------------------------------</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p>
        <a href="#">高富帅</a> 福富福富福富福富福富</p>
    <p style="color: #00f">
        这是原来底部</p>
    <div id="aaa">
    </div>
</body>
</html>


KingCruel
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
jquery weui实现多tab异步滚动加载更多
包子源的博客
08-13 7404
多tab实现ajax加载更多 选项一 选项二 选项三
自定义的根据滚动条进行分页（vue或html原理一样）
qq_41687299的博客
07-24 547
效果：滚动条触底加载下一页 元素： <ul class="list" id="list" @scroll="myscroll" :style="{'overflow-y':(tableData.length <= pageSize-1 ? 'hidden' : 'scroll')}" ></ul> <p v-if="loading" style="text-align:center;font-size:10px">正在加载</p> <p
原生jquery实现移动端滑动分页
weixin_43045869的博客
11-20 688
原生jquery实现移动端滑动分页 计算公式：a-d+b-c = 152-50+800-852=50 < 55。如果我们设定this.offset=55。所以此时可以触发加载新内容.此时滚动条向下滚动了50。
JQuery滚动分页查询功能
weixin_30877493的博客
04-25 205
//获取滚动条的高度 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = ...
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
10-20
这种技术通常被称为无限滚动或滚动加载，它允许用户无须点击分页按钮就能查看更多的信息，使得浏览更加流畅。在jQuery中，我们可以利用滚动事件来实现这一功能。 首先，为了实现滚动加载，我们需要引入jQuery库。...
jquery 实现滚动条下拉时无限加载的简单实例
10-22
本文将详细讲解如何使用jQuery实现一个简单的滚动条下拉时无限加载的实例。 首先，我们要理解实现无限滚动的基本思路。当用户滚动到页面底部时，我们需要触发一个函数，该函数负责向服务器请求更多的数据，并将新...
jQuery scroll事件实现监控滚动条分页示例
10-26
主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可以参考下
jquery 滚动条事件简单实例
10-27
总结起来，这个jQuery滚动条事件的简单实例展示了如何监听用户滚动页面的行为，并在特定时刻执行相应的操作。这种技术广泛应用于动态加载数据、实现无限滚动效果以及优化网页性能。通过理解和应用这些概念，开发者...
jQuery实现瀑布流滚动加载分页效果
07-23
jQuery实现瀑布流滚动加载分页效果，利用jquery下拉分页，上拉加载，下拉分页
jQuery滑动到底部加载下一页数据的实例代码
11-27
废话不多说了，直接给大家贴代码了，具体代码如下所示： [removed]page_num =page_num+1 ; //页码自动增加，保证下次调用时为新的一页。 $.ajax({ type: "get", url: rent_url, data: '2', dataType: "json", success: function (data) { // 查询到的数据总数 rentDataNum = data.count // 每页加载6个 需要加载的
scroll事件实现监控滚动条并分页显示(zepto.js)
10-20
主要为大家详细介绍了scroll事件实现监控滚动条并分页显示示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery 实现的滑动分页
test
04-24 3001
http://www.jq22.com/jquery-info15943很不错的东西
jqGrid分页点击事件，点击分页的时候滚动条回到顶端
笑到世界都狼狈的博客
12-11 678
首先分页的点击事件如下： //点击分页 onPaging: function () { //点击分页的时候，滚动条回到顶端 $(".ui-jqgrid-bdiv").animate({scrollTop:0},1000); }, 参照地址：点击分页：https://www.w3xue.com/exp/article/201810/3205.html div滚动条回到顶部：https://www.cnblogs.com/chengkun101/p/4588092.html ...
滚动条加载分页数据
梦寻汝的博客
08-13 296
<divid="listBody"></div> listBody 数据外最大的盒子 data(){ return{ page: { pageNum: 1, //页码 pageSize: 10, totalCount: 0, }, } } mounted() { //获取数据最大的盒子 let wrap = document.getElementById("listBody"); ...
jquery滚动分页插件实现
九丶弟
09-12 766
前言 滚动刷新的插件百度能百度出很多，虽然都能实现自己的功能，但是却不是自己最理想的，它们要不就是功能太臃肿，要不就是配置太复杂。这里我分享一个自己写的一个。 注意： 代码中使用到jquery，如果你不想过度依赖jquery，可以将$换成javascript的原生写法。如果你是用在vue中，可以使用如`vue-infinite-scroll`。 代码 var lsScroll = (para...
jquery滚动条滚动到顶部
最新发布
08-09
要将jQuery滚动条滚动到页面顶部，可以使用以下代码： ```javascript $('html, body').animate({scrollTop: 0}, 'slow'); ``` 这行代码选择器 `$('html, body')` 选择了整个文档，无论是在 `html` 元素上滚动还是在 `body` 元素上滚动，都可以实现滚动到顶部的效果。 `.animate()` 是jQuery的动画函数，通过改变滚动条的位置来实现滚动的效果。在这里，我们将滚动条的位置 `scrollTop` 设置为0，这意味着将滚动条滚动到顶部。 `'slow'` 参数表示滚动的速度，可以是 `'slow'`、`'fast'` 或毫秒数。在这里，我们选择了 `'slow'`，意味着滚动动画将以较慢的速度执行，使用户能够更自然地感受到滚动效果。 使用上述代码，当触发事件时，jQuery滚动条将平滑地滚动到页面的顶部。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值