Jquery 判断滚动条到达顶部或底部 （可用于上拉下拉加载刷新）

最新推荐文章于 2024-07-14 03:40:51 发布
最新推荐文章于 2024-07-14 03:40:51 发布
阅读量3.6w 收藏 8
点赞数 2
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>


<!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 runat="server">
    <title>无标题页</title>


    <script type="text/javascript" src="jquery-1.8.3.js"></script>


    <script type="text/javascript">
        $(document).ready(function() {
            $(window).scroll(function() {
                //$(document).scrollTop() 获取垂直滚动的距离
                //$(document).scrollLeft() 这是获取水平滚动条的距离
                if ($(document).scrollTop() <= 0) {
                    alert("滚动条已经到达顶部为0");
                }


                if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
                    alert("滚动条已经到达底部为" + $(document).scrollTop());
                }
            });
        });
    
    
    </script>


</head>
<body>
    <form id="form1" runat="server">
    <div style="height: 3000px; background-color: Blue;">
    </div>
    </form>
</body>
</html>
Sbangm
关注
jquery 上拉加载更多
02-10
jquery 上拉加载更多 当页面距离底部小于100像素时自动加载
Jquery上拉滚动加载更多
10-15
Jquery实现手机端上拉滚动加载更多数据功能手指滑动，完美实现多数据分布加载效果。数据再多页面流畅展示。
jQuery上拉加载
东泰博客
02-02 344
原文链接：http://dt2008.cn/?p=126 在页面中，做分页小编只知道两种，一种是上一页下一页的，另外一种就是上拉加载，这个上拉加载的功能的是比较常用的，在移动端经常用到的，上一页下一页这种机制呢是在PC端网站很常见的。 思路是这样的，比较简单容易理解哈 首先定义个页数器(计步器，从1开始) Ajax请求第一页的数据(封装成方法，减少代码量) 在ajax请求参数调用页数器(计步器，...
jquery 刷新下拉更新选中值
最新发布
weixin_36546980的博客
07-14 86
利用jQuery实现下拉刷新更新选中值 在网页开发中，下拉框是常见的交互元素之一，用户可以通过下拉选择框选择或输入自己想要的选项。有时候，我们需要动态更新下拉框的选项，并且保持用户当前已经选择的值不变。本文将介绍如何利用jQuery实现下拉框的刷新和更新选中值的功能。 1. 基本原理 当需要更新下拉框的选项时，我们可以通过...
jquery上拉加载
qq_39958629的博客
04-26 599
css: * {margin:0px;padding:0px;} #header { position:fixed; top:0px; left:0px; width:100%; height:50px; background:#FAA732; text-align:center; line-height:50px; color:white; font-weight:bold;...
JqueryMobile上拉刷新
aa80303857的博客
05-06 166
$("#page_1").on("scrollstop", function(event){ console.log($(document).scrollTop()+"---"+$(document).height()+"---"+$(window).height()); if($(document).scrollTop()+1 >= $(document).height()-$(window).height()){ //do your work console.log(.
jquery 下拉刷新上拉加载
05-04
在网页开发中，"下拉刷新"和"上拉加载"功能已经成为现代用户界面不可或缺的部分，尤其是在处理大量数据或内容的列表时。这两个特性能够提供流畅的用户体验，使得用户可以轻松地查看更多的信息，而无需手动滚动到页面...
jQuery移动端下拉刷新、上拉加载更多插件
08-16
在移动设备上，为了优化用户体验，许多网页应用都采用了下拉刷新（Pull-to-Refresh）和上拉加载更多（Infinite Scroll）的功能。jQuery作为一款广泛使用的JavaScript库，提供了丰富的插件来支持这些特性。本篇文章将...
jquery使用iscorll实现上拉、下拉加载刷新
10-19
要实现上拉下拉加载刷新，我们需要依赖于几个关键的步骤，这些步骤主要通过iscroll的API来完成。本文首先通过一个实例代码展示了如何构建基础的滚动容器，并通过iscroll提供的回调函数来判断滚动的位置，并以此来...
jQuery手机端上拉刷新下拉加载更多页面源代码
03-18
"jQuery手机端上拉刷新"是指当用户将滚动条拉至页面底部时，通过触发特定的jQuery事件，实现页面内容的实时更新。这个功能通常结合Ajax技术来实现，Ajax允许我们在不重新加载整个页面的情况下向服务器请求新数据。...
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
10-23
在移动应用开发中，上拉刷新（Pull-to-Refresh）和下拉加载更多（Infinite Scrolling）是常见的用户体验设计模式，特别是在新闻、社交媒体或列表展示类应用中。这些功能提高了用户浏览信息的效率，无需手动翻页或...
Jquery实现手机端上拉滚动加载更多数据
07-28
Jquery实现手机端上拉滚动加载更多数据功能手指滑动，完美实现多数据分布加载效果。数据再多页面流畅展示。
jQuery上拉刷新下拉加载效果代码
02-18
jQuery上拉刷新下拉加载效果代码
iscroll5+jquery+afui上拉加载下拉刷新
12-15
iscroll5+jquery+afui上拉加载下拉刷新
jQuery+AJAX实现无刷新下拉加载更多
10-23
主要介绍了jQuery+AJAX实现无刷新下拉加载更多的相关资料,需要的朋友可以参考下
jquery 上拉刷新，下拉加载数据
12-16
jquery 上拉刷新，下拉加载数据，兼容app
jquery实现上拉加载
qq_21138747的博客
12-13 791
$(window).scroll(function() { var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度 var scrollHeight = $(document).height(); //当前页面的总高度 var clientHeight = $(this).height(); //当前可视的页面高度 if (scrollTop + clientHeight >= scrollHeight - 5
如何利用jQuery实现上拉加载？
lb_888888的博客
08-18 201
阳光透过树叶的缝隙闪烁，投下斑驳的光影，犹如一幅幅抽象的画作，融入了大自然的韵味。夏日的午后，微风轻拂，带来阵阵草木的芬芳。岸边的芦苇随风轻轻摇曳，发出沙沙的声响，仿佛在述说着自己的故事。这条溪水是山脚下的一条小溪，流经这片宁静的山谷，汇入了山间的溪流。阳光透过树叶的缝隙闪烁，投下斑驳的光影，犹如一幅幅抽象的画作，融入了大自然的韵味。夏日的午后，微风轻拂，带来阵阵草木的芬芳。岸边的芦苇随风轻轻摇曳，发出沙沙的声响，仿佛在述说着自己的故事。这条溪水是山脚下的一条小溪，流经这片宁静的山谷，汇入了山间的溪流。
Jquery上拉加载更多
weixin_36076584的博客
03-20 1170
var pageNum=1;//定义初始页面var all= ;  //后台返回总页面$(window).scroll(function {  //滚动条滚动时调用var scrollTop = $(this).scrollTop;//计算已经卷进去滚动条的的高度var scrollHeight = $(document).height;//当前页面的总高度var windowHeight = $...
JS+CSS下拉刷新/上拉加载jQuery插件实现
下拉刷新和上拉加载功能常见于许多应用程序中，它们允许用户在内容到底部时加载更多数据，或者在顶部时刷新内容。 首先，实现这类功能需要注意的关键点是利用CSS的`transition`和`transform:translate`进行平滑动画...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值