jquery滚动点击加载更多

基础概念

jQuery滚动点击加载更多是一种常见的网页交互功能，用于实现当用户滚动到页面底部时自动加载更多内容，或者通过点击按钮来手动加载更多内容。这种技术通常用于无限滚动页面，以提高用户体验，减少页面刷新次数。

类型

无限滚动：当用户滚动到页面底部时，自动加载更多内容。
点击加载更多：用户点击一个按钮，手动触发加载更多内容。

应用场景

新闻网站：用户可以滚动查看更多新闻。
电商网站：用户可以滚动查看更多商品。
社交媒体：用户可以滚动查看更多动态。

示例代码

以下是一个简单的jQuery实现无限滚动的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite Scroll Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content">
        <!-- 初始内容 -->
        <p>Content 1</p>
        <p>Content 2</p>
        <p>Content 3</p>
        <!-- 更多内容将通过JavaScript动态加载 -->
    </div>
    <script>
        $(window).scroll(function() {
            if($(window).scrollTop() + $(window).height() == $(document).height()) {
                loadMoreContent();
            }
        });

        function loadMoreContent() {
            $.ajax({
                url: 'load_more.php', // 假设后端接口地址
                method: 'GET',
                success: function(data) {
                    $('#content').append(data);
                },
                error: function() {
                    alert('Failed to load more content');
                }
            });
        }
    </script>
</body>
</html>

常见问题及解决方法

滚动加载不触发：
- 原因：可能是滚动事件未正确绑定，或者滚动条件判断有误。
- 解决方法：确保滚动事件正确绑定，并检查滚动条件是否正确。

加载内容重复：
- 原因：可能是多次触发加载事件，或者后端接口返回的数据有重复。
- 解决方法：在加载内容前设置一个标志位，防止重复加载；确保后端接口返回的数据不重复。
加载速度慢：
- 原因：可能是后端接口响应慢，或者加载的数据量过大。
- 解决方法：优化后端接口性能，或者分批加载数据，减少单次加载的数据量。

通过以上方法，可以有效解决jQuery滚动点击加载更多功能中常见的问题。

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

有帮助

没帮助

jQuery无限滚动导致链接暂时不起作用？

、、

几周前，我用jquery实现了一个无限滚动的页面。滚动本身效果很好，但我得到了一个非常奇怪的副作用。我在使用火狐或IE8时也有同样的体验，所以我猜不是浏览器的问题。

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

1回答

使用ajax无限滚动我的博客主页

、、、

你好，我有一个用php/codeigniter编写的博客，在我的主页上(所有的帖子都显示在那里)，我想在我的帖子上无限滚动，这样当我到达页面底部时，我可以再加载7个。->load->vars($data); } 我的意见中的函数index_show_post()为我加载了另外

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

4回答

我有我的搜索栏JQuery UI自动完成小工具，它与me.Basically的工作很好我想加载更多的数据滚动搜索栏的结果，我有100个有限的结果像分页我们从后端做。我想在滚动到末尾加载100多个结果(就像在分页页面2点击会显示100多个结果)，并附加到自动完成生成的列表中。我如何做到这一点，有没有可用的插件或一些链接可以帮助我。我有400px的高度搜索栏的结果。我使用过Jquery。我已经找到了一些解决方案，但这适用于滚动到页面末尾

浏览 0提问于2011-11-28得票数 3

1回答

确保更多的点击负载不会导致用户滚动到顶部。

、、、、

我有一个问题，加载更多在一个Drupal网站。示例链接：<ul class="pager pager-load-more"> <li class="pa

浏览 3提问于2017-11-18得票数 0

回答已采纳

1回答

Magento : JQuery和无限Ajax滚动不支持分层导航

、、

我正在使用FME过滤器和无限的Ajax滚动。最初，当我使用过滤器选择和取消选择产品时，它工作正常，并根据分页绑定产品。但是，一旦我滚动到加载更多的产品，它不加载，加载更多的进度按钮是不可见的。是否存在url问题？或者jQuery的类/ Id问题？阻止更多的产品被加载

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

2回答

Jquery加载更多滚动速度

、

我对下面的代码有一个小问题，它工作得很好，然而，唯一的问题是，当有人在数据尚未加载的情况下向下滚动几次时，它会产生一些问题，比如加载相同的数据两次或跳过某些部分，等等。

浏览 1提问于2012-12-31得票数 0

1回答

无限滚动jetpack WordPress:点击工作正常，滚动挂起

、、

我正在使用jetpacks无限滚动，但它不能完全工作： } ); } )

浏览 15提问于2017-02-21得票数 0

6回答

javascript -类似于google地图的图像滚动

、、

我想建立一个图像滚动，像谷歌地图的工作方式。当网站首次加载时，页面中间会有一个查看框，其中包含图像的一部分。用户可以点击并拖动该图像，即滚动，以检查该图像的其他区域。如果用户恰好滚动超出图像的边界，该框将加载相邻的图像。我还想用标记覆盖这些图像，用户可以单击这些标记来放大查看更多详细信息。有没有我已经想要的库呢？或者接近我想要的东西，这样我就可以开始定制它了？我喜欢使用jquery库，所以用jquery构建的任何东西都会很棒。

浏览 2提问于2011-01-27得票数 10

回答已采纳

1回答

在Scroll中替换"Click to load more“以加载更多内容

、

目前，我的客户的网站有一个“加载更多”按钮，链接到Shutterstock API，每次你点击该按钮就加载更多的照片。我的客户要求将其更改为“当用户向下滚动时，它会自动加载更多图像”。我猜它点击了多次，因为按钮停留在视图中，不确定如何处理这一点。链接到"load_more_images“按钮的”加载更多“功能的代码在一个"func.php”页面中(它用于Wordpress站点，

浏览 0提问于2018-06-08得票数 0

1回答

如何继续点击“阅读更多”按钮，直到不再有任何内容显示使用Nightwatch？

、、、、

我目前正在测试，以确保一切正常，即使点击“阅读更多”按钮，直到所有内容都通过ajax完全加载。我怎样才能让Nightwatch一直点击“阅读更多”按钮，直到没有更多的内容要加载/它不能再向下滚动？document.body.scrollHeight);') // scroll to bottom

浏览 1提问于2018-06-12得票数 0

2回答

JQuery是收听mysql获得新记录或通过单击加载新内容的最快方式吗？

、、

你认为我必须使用JQuery或Comet或其他什么吗？它使用JQuery自动加载更多的内容，但有时自动加载内容不能正常工作。我认为这是太慢，当我比较与其他网站！

浏览 5提问于2015-08-29得票数 1

回答已采纳

2回答

加载更多内容后，快速滚动到顶部不起作用

、、

我有一个有更多加载的表视图。我想添加滚动到顶部功能，当用户按标签栏项目两次像twitter，instagram。这是我的代码，当用户点击两次标签栏项目。问题是当我加载更多的单元格到我的tableview并滚动到顶部时，tableview没有滚动到顶部，它卡在了某个地方的中间。另一件奇怪的事情是，如果我在加载更多后手动滚动到顶部，选项卡栏项目滚动表格视图直到加载<

浏览 19提问于2019-03-21得票数 0

1回答

如何在移动网页中嵌入外部网页

、、

我尝试过在div中使用Iframe，它在少数智能手机设备上运行良好，但在其他一些设备上运行良好(如note ...)我可以找到什么外部网页区域加载在Iframe与超级链接，超级链接提醒同样看不见，那就是即使滚动页面，页面移动，但超级链接不工作点击。使用100%的宽度和高度，不能在x和y方向上进一步滚动，即使页面有更多的滚动。第三，我尝试在div中使用jquery onload() http://code.jquery.com

浏览 0提问于2013-04-12得票数 2

1回答

jQuery移动链接问题

、、

我对jQuery手机有点问题。我正在使用PhoneGap。只有当你点击应用程序中的一个链接，离开应用程序，然后返回应用程序时，一切都是固定的-内部链接和滚动。看起来jQuery JS不能正常加载... 有人

浏览 1提问于2012-01-23得票数 0

2回答

元素高度()不加+ 200？

、

我想滚动到容器的末端。元素在点击时通过ajax添加新项目，所以每次单击加载更多内容时，我都会重新计算它的高度。该页面滚动良好，但我也想添加导航高度，以便有确切的像素。{ } margin-top: 104px; } Jquery

浏览 0提问于2015-12-05得票数 0

回答已采纳

1回答

Google样式Ajax页面加载

、

有人能给我更多关于这方面的信息吗？当您从一个页面转到另一个页面时，内容会变灰，然后在加载内容时暂停，然后将内容替换为新的内容，然后将您带到页面的顶部。我想在我的网站上达到同样的效果，所以我想知道我的步骤是否正确：我在正确的轨道上吗？有人能提供更多的信息让我开始吗？

浏览 1提问于2012-08-16得票数 1

回答已采纳

1回答

更新面板中的ScrollBar位置

、、、、

我有一个滚动条的问题。我有两个更新面板。1保存一个图库和其他updatepanel，当单击按钮时保存2个按钮，图库中的图片会发生变化。我有一个问题，在我的大画廊(容纳更多的图片)，当点击按钮时，滚动条被重置到页面的顶部，当你向下滚动时，它需要花费很长时间，所以当它试图加载图片或重新绘制它们(不确定)时，页面会卡住。我试着寻找一种在画廊位置启动滚动条的方法，这样用户就不需要在加载了他想要查看的主题的图片后向下滚动，但大约几个小时后，我

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

回答已采纳

3回答

不能重新加载Jquery

我有这个页面在顶部有一个下拉列表，我在上面加载了一个Jquery，它用新内容刷新整个页面……如果你在选择顶部的下拉菜单到任何类型的“快餐Pos站”后再次点击更多，滚动就不再起作用了

浏览 1提问于2010-09-04得票数 1

回答已采纳

1回答

如何使用JQuery处理页面上显示在长长列表中的大量用户评论？

、、、

我想知道在JQuery中做这件事是否足够稳定？或者是否需要先在ruby/rails中完成？无论哪种方式，我都不希望在用户进入显示消息的页面时加载大量消息。我想要的是将结果限制到一个特定的数量，然后在用户向下滚动时让页面加载更多的结果，或者让他们点击一个类似于facebook和googleplus的“加载更多”按钮。目前，我的页面上有几英里长的评论，我想用jQuery来控制它。我猜因为每个评论都存储在一个div /

浏览 0提问于2012-04-08得票数 1

回答已采纳

1回答

滚动到最高能见度

、

我刚开始使用Javascript并使用Jquery，遇到了一个问题。我做了一个滚动到顶部的按钮，当你开始向下滚动时应该是可见的。我让它工作，当我点击它，我顺利地滚动到顶部，当你在顶部，它消失了。只有当我第一次加载页面时，它已经是可见的，然后当我向下滚动它时，它会短暂地消失，直到我到达元素所在的位置，当您向下滚动更多的时候，它会再次弹出。

浏览 3提问于2015-03-20得票数 4

回答已采纳

点击加载更多