文章/答案/技术大牛

发布

社区首页 >问答首页 >如何仅当使用jQuery单击loadmore按钮时才使用slideTo()？

问如何仅当使用jQuery单击loadmore按钮时才使用slideTo()？
EN

Stack Overflow用户

提问于 2011-10-02 22:24:43

回答 1查看 658关注 0票数 0

在我的脚本中，我从外部RSS提要加载了一些帖子。我有一个“加载更多”按钮，当它被点击时，调用loadfeed()函数，并显示大约10多个帖子。

发生这种情况时，会有一个slideTo()将浏览器滑到新帖子列表的第一个位置。

除了“加载更多”按钮，我还有一个计时器来检查这些提要的任何新帖子。这种情况每3分钟发生一次。

正如我所说的，如果你点击“加载更多”按钮，页面就会随着屏幕顶部的第一个新帖子一起移动。这里的问题是，如果你点击了“加载更多”按钮，当你阅读文章时，当你阅读3分钟后，你会滑回到你加载的新列表的第一篇文章，这种滑动也会发生。更具体地说，当你加载(从默认的20) +10多个帖子时，你将在3分钟后滑到第21个帖子。

所以我的问题是如何避免这种情况？

这是调用loadfeed()的#loadmore按钮

$("#loadmore").click(function() {
    cap += 10;
    loadfeed();

});

这是loadfeed()处理滑动的一部分。我有一个if语句，滑动发生在默认的20个帖子之后。如果没有这个，你将在3分钟后滑到11个帖子，并且不会点击“加载更多”。

if (cap > 20) {
$(".p" + (cap-9)).slideto({
    slide_duration : 'slow'
});
}

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-10-02 22:36:22

如果我误解了，请原谅，但您就不能将一个参数传递给loadfeed()吗

在$("#loadmore").click中，调用loadfeed(true)，对于计时器，调用setTimeout(function () { loadfeed(false); }, 12000);。或者类似的。

编辑

我不知道你在用哪个幻灯片插件。我已经下载了两个，但都不能像你的那样工作。我已经把这个用在scrollTo plugin上了。

在这段代码中，我删除了所有AJAX代码和其他一些似乎与问题无关的内容。基本的更改是向loadfeed()添加一个参数，该参数告诉它在添加新内容时是否滚动。单击该按钮使其滚动到底部；等待计时器则不会。(我还添加了一个clearTimeout，用于在有人按下load按钮时多次停止计时器触发。)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Testing</title>
    <style type="text/css">
        .Top { background-color: #ccc; padding: 10px; position: fixed; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.scrollTo.js"></script>
    <script type="text/javascript">
        $(function ()
        {
            var cap = 0;
            var timerId = null;

            function loadfeed(scroll)
            {
                cap++;
                $("#loadmore").hide();
                $('#feed')
                .addClass('loading')
                .append("<div class=\"p" + cap + "\"><p>Biodiesel put a bird on it pitchfork beard cosby sweater tattooed, 3 wolf moon skateboard thundercats. Craft beer irony sartorial DIY. Portland photo booth trust fund, mlkshk yr you probably haven't heard of them salvia. Trust fund marfa food truck Austin etsy synth. Seitan chambray williamsburg, thundercats american apparel cardigan four loko letterpress food truck cosby sweater. Art party Austin biodiesel, single-origin coffee etsy organic mlkshk yr PBR. Skateboard master cleanse 3 wolf moon, freegan Austin tumblr messenger bag vinyl dreamcatcher.</p><p>Tumblr before they sold out helvetica, chambray iphone yr DIY cosby sweater PBR synth stumptown keytar. Letterpress you probably haven't heard of them iphone, keffiyeh photo booth chambray american apparel lomo artisan. Hoodie beard quinoa locavore four loko mixtape. Tofu stumptown viral you probably haven't heard of them, readymade thundercats echo park etsy 8-bit. Pitchfork ethical before they sold out, freegan keffiyeh yr marfa banh mi echo park williamsburg tofu PBR twee. Keffiyeh pitchfork food truck, gluten-free bicycle rights iphone fixie banh mi vinyl craft beer tofu keytar +1 brooklyn. Synth echo park letterpress locavore, chambray butcher banh mi vinyl tofu twee four loko food truck beard mustache fap.</p></div>")
                .removeClass('loading');
                if (timerId !== null) clearTimeout(timerId);
                timerId = setTimeout(function () { loadfeed(false); }, 12000);
                $("#loadmore").show();

                if (scroll) $(window).scrollTo(".p" + cap);
            }

            loadfeed();

            $("#loadmore").click(function ()
            {
                loadfeed(true);
            });
        });
    </script>
</head>
<body>
    <div class="Top"><button id="loadmore">Load</button></div>
    <div id="feed">Feed</div>
</body>
</html>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/7626934

复制

相似问题

问如何仅当使用jQuery单击loadmore按钮时才使用slideTo()？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何仅当使用jQuery单击loadmore按钮时才使用slideTo()？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何仅当使用jQuery单击loadmore按钮时才使用slideTo()？
EN