文章/答案/技术大牛

发布

jquery判断滑动到底部

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。滑动到底部的判断通常用于实现无限滚动或加载更多内容的功能。

类型

滑动到底部的判断可以通过以下几种方式实现：

基于滚动位置：通过监听 scroll 事件，计算滚动条的位置来判断是否到达底部。
基于内容高度：通过比较内容的高度和滚动条的位置来判断是否到达底部。

应用场景

滑动到底部的判断常用于以下场景：

无限滚动：当用户滚动到页面底部时，自动加载更多内容。
分页加载：在用户滚动到页面底部时，显示分页控件或提示用户点击加载更多。

示例代码

以下是一个基于滚动位置的滑动到底部判断示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动到底部示例</title>
    <style>
        #content {
            height: 2000px;
            border: 1px solid #ccc;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content">
        <!-- 这里放置你的内容 -->
    </div>
    <script>
        $(window).scroll(function() {
            if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
                alert('已经滑动到底部');
                // 在这里可以加载更多内容
            }
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

滚动事件频繁触发：如果页面内容较多，滚动事件可能会频繁触发，导致性能问题。可以通过设置节流函数来减少事件触发频率。

function throttle(func, wait) {
    let timeout = null;
    return function() {
        if (!timeout) {
            timeout = setTimeout(() => {
                func.apply(this, arguments);
                timeout = null;
            }, wait);
        }
    };
}

$(window).scroll(throttle(function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        alert('已经滑动到底部');
        // 在这里可以加载更多内容
    }
}, 200));

内容动态加载：如果内容是动态加载的，需要在内容加载完成后重新计算滚动位置。

function checkScroll() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        alert('已经滑动到底部');
        // 在这里可以加载更多内容
    }
}

$(window).scroll(checkScroll);

// 假设这是一个动态加载内容的函数
function loadMoreContent() {
    // 加载更多内容
    // ...

    // 重新计算滚动位置
    $(window).scrollTop($(window).scrollTop() + newlyLoadedHeight);
    checkScroll();
}

通过以上方法，可以有效解决滑动到底部判断中可能遇到的问题。

页面内容是否对你有帮助？

有帮助

没帮助

使用jquery实现滑动效果

、

我在这个网站上看到了一个很好的滑动效果：浏览到页面底部，会发现有一些图标可以平滑地滑动。我不认为他们使用了jquery，但我想知道jquery插件的用法是什么。

浏览 0提问于2010-11-01得票数 0

回答已采纳

1回答

带有jquery动画的Twitter引导表

、、、、

td> </td> </tbody>如何使用jquery

浏览 3提问于2013-10-31得票数 2

回答已采纳

1回答

切换后运行函数在倒转时不能正常工作

、、

我正在使用以下jquery函数来slideToggle .切换框，并在slideToggle完成后滚动到顶部。这在向下滑动时工作得很好。切换框，但当它向上滑动时，这两个函数似乎同时运行。工作示例： jQuery(".toggle-box").slideToggle(1500, f

浏览 1提问于2013-01-18得票数 0

2回答

滑动一个固定的div

、

我看了一个例子，其中有一个锚，该锚上的onclick事件显示了一个隐藏的div，如下所示：#panel { left:0; z-index:1000;} 从jquery中滑出是行不通的。主要的问题是，因为这是固定的底部，即使我可以滑动第二个d

浏览 2提问于2014-02-09得票数 1

回答已采纳

3回答

JQuery .slideDown()正在向上滑动

、、、、

在function capIn()中，在我看来，$botcap.slideDown("slow")这一行应该向下滑动div。它把它往上滑。如果我尝试使用.slideUp()，就好像它试图向下滑动一样，什么也没有发生。有人能给我解释一下吗？

浏览 0提问于2012-02-11得票数 5

回答已采纳

1回答

在subPages上使用外部脚本？

、、

我在我的子页面中使用简单的jQuery，css script (外部)有一个小问题。它在索引tho中工作。它应该在页面的左侧滑动菜单面板。响应式菜单。标题中的jQuery脚本 src="https://code.jquery.com/jquery-3.5.0有没有

浏览 0提问于2020-05-01得票数 0

1回答

JQuery从不同方向显示动画

、

如何改变jQuery的隐藏(“慢”)/show(“慢”)动画的方向？默认情况下，它使用淡出和滑动到左上角/从左上角滑动的组合。我如何将其更改为滑向/滑出底部-中心或其他任意方向？举一个滑动到底部中心的修改过的hide(“slow”)的例子，我试着做了$(el).animate({opacity:0, height:0, marginBottom:0})，但这似乎不起作用。

浏览 1提问于2011-02-09得票数 0

回答已采纳

1回答

从下到上放大/显示图像

、

是否可以从下到上放大/显示图像？这是HTML - <div class="logoTop"> </div>

浏览 0提问于2013-02-19得票数 2

回答已采纳

1回答

视图控制器上没有显示后退按钮，它是从底部向上滑动的，而不是左边。

、

我一直在试图弄清楚为什么我的节目收集器没有进入目的视图控制器到导航堆栈。图片的vc，注意没有后退按钮。您可以将屏幕向下滑动，使其弹出回到以前的视图控制器。下面是导航堆栈的图片：

浏览 4提问于2019-12-26得票数 1

1回答

jQuery slideUp()不缩小填充-底值

、

在中，您会注意到，当您单击其中一个按钮时，容器将慢慢向上滑动。当它到达顶端时，你会发现它并不是一直往上滑。如果您查看检查器，就会发现li的底部填充并没有像您在slideUp()操作期间预期的那样缩小。注:为了更好地显示问题，向上滑动的速度非常慢。注2:当我将jQuery库更改为1.7.2时，它实际上可以正常工作。有意思的。顺便说一下:我向jQuery提交了

浏览 3提问于2012-08-29得票数 7

回答已采纳

2回答

用于模式弹出的SlideUp Jquery

、、、

现在，我有模式设置，以淡入，但我不想让模式从底部的页面上滑到顶部。我尝试了slideUp()而不是fadeIn()，但是它不起作用。我觉得我错过了什么。我需要为slideUp()创建另一个函数吗？

浏览 0提问于2018-02-12得票数 3

回答已采纳

3回答

在JQuery中，是否有一种方法可以将时间限制过期后发生的效果排入队列？

、、、、

我正在尝试使用jQuery为网页创建消息通知。消息将从底部向上滑动，然后在10秒后向下滑动。问题是，如果可能的话，我想通过jQuery effects系统来设置时间，而不是使用setTimeouts。如何使用jQuery将特定时间间隔后发生的效果排队？

浏览 0提问于2011-01-13得票数 1

回答已采纳

1回答

jQuery:如何将一个绝对的div和另一个正在滑下的div一起滑下？

我有一个绝对定位在页面底部的文本容器，在它的上方有一个显示/隐藏按钮(也是绝对定位的)。</div>$(".button").click(

浏览 3提问于2013-06-24得票数 0

回答已采纳

1回答

jquery移动面板从上到下从右和左滑动。

、、、

你好，我正在用jquery手机创建一个移动应用程序，正在工作的面板可以从右向左滑动，但我想再移动一步，而不是从右向左滑动，我希望它从上到下滑动。封闭面板现在它从右向左滑动

浏览 2提问于2014-09-26得票数 1

2回答

jQuery固定页眉滑下滚动问题

、、、、

我是jQuery的新手，请不要做出严格的判断。当我滚动页300 page时，我希望标题变得固定。如果<300 if，则移除固定。我想把它动画化，向下滚动时向下滑动，当我滚动顶部时向上滑动。position: relative;position: fixed;left: 0;} 请帮助我解决这个问题，记住，不要严格<

浏览 2提问于2014-08-03得票数 1

回答已采纳

2回答

jquery显示隐藏

、

听着，我有个问题，我怎么做这样的事情(看图片)当我单击第一个绿色立方体时，会在页面底部的一个#div容器上滑动：当我单击页面底部的红色第一个cude #div容器时，向下滑动：，但当我单击绿色立方体#div容器底部的绿色立方体#div容器(在图2上)时，向下滑动并向上滑动，显示新信息(关于标题2. )。

浏览 0提问于2011-11-26得票数 1

回答已采纳

2回答

如何让jQuery手风琴向上滚动而不是向左滚动？

、、

我使用的是jQuery Accordion，默认情况下，它似乎会向上滚动&向左滚动。客户决定他们只想让它向上滚动，但我不知道我需要更改什么，也不知道是否有需要调用的东西。

浏览 3提问于2011-05-09得票数 1

2回答

ie8 addClass和removeClass不工作，jQuery1900969595128946837添加到div中而不是类。

如果到达页面底部，以及单击元素时，我的页脚向上滑动。它的工作方式是在页脚中添加/删除类active。只有当页面位于底部时，类才会被分配，然后刷新页面，使其在页面刷新时自动位于底部。但是这门课从来没有被删除过。else{ $('#page-footer').slideDo

浏览 4提问于2014-03-06得票数 0

2回答

如何使用html5而不是adobe实现悬停效果的显示？

、、、

我有一个网页，需要显示一个滑动面板，当你把你的光标足够接近底部。我所见过的最接近的效果是在中，当您阅读电子书时，当光标移动到足够近时，顶部和底部控件就会出现。让我解释一下，即使屏幕是垂直滚动的，底部滑动向上的元素应该总是出现在屏幕的底部，所以我想，它不仅仅是使用jQuery.hover。另一个更新：我还想补充的是，当光标悬停在足够近的位置，而不是在元素

浏览 3提问于2012-12-11得票数 1

回答已采纳

5回答

下面有jQuery .slideUp和.slideDown函数，当到达浏览器窗口底部的#showfootershop div时，#footershop div向上滑动，然后立即向下滑动。当#footershop位于浏览器窗口的底部，直到用户滚动浏览器窗口时，我如何才能使#showfootershop保持“向上”和可见？Fiddle: $(window).scroll(function(){ /* when reaching the element with i

浏览 4提问于2012-12-04得票数 10

回答已采纳

点击加载更多