Question

我整天都在苦苦挣扎......我有几个帖子，每个帖子都有下一个和上一个按钮。想法是针对每个帖子及其下一个和上一个按钮，将窗口滚动到下一个帖子或上一个帖子。我尝试过使用each()函数，不幸的是，它很难开始工作。

到目前为止这是jQuery：

    var scrollTo = function(element) {
        $('html, body').animate({
            scrollTop: element.offset().top
        }, 100);
    }

function prev_next_scrolling() {
        var articles = $("article.post"),
            counter = 0;

        articles.each( function() {

            var articles = $(this);
            $('.next-btn', articles).click( function() {
                scrollTo($('article.post').eq(counter + 1));
            });

            $('.prev-btn', articles).click( function() {
                scrollTo($('article.post').eq(counter - 1));
            });
            counter++;

        });
    }
    prev_next_scrolling();

这是HTML：

<article class="post">
    <h2>Post Title</h2>
    <p>Post description</p>

    <a href="#" class="prev-btn">Previous</a>
    <a href="#" class="next-btn">Next</a>    
</article>

以下是jsfiddle链接供你们看看！

http://jsfiddle.net/casacoda/2zM3Q/

任何帮助将不胜感激！先谢谢你们！

Answer 1

我已经更新了小提琴，以便在评论中解决您的所有问题

Updated Working Fiddle

我在没有你所有代码的情况下工作，只需浏览dom。

如果您对提供的小提琴有疑问，请告诉我。基本上这利用了您当前的结构，它使用parent().next()找到下一个文章，然后发现文章h2。然后使用H2s垂直偏移位置滚动到它。与之前的链接相同，但使用parent().prev()

$(document).on('click', '.next-btn', function(){
   // find the next anchor
   var nextAnchor = $(this).closest('article').next().find('h2')
   $('html,body').animate({scrollTop: nextAnchor.offset().top},'slow');
});



$(document).on('click', '.prev-btn', function(){
   // find the previous anchor
   var prevAnchor = $(this).closest('article').prev().find('h2')
   $('html,body').animate({scrollTop: prevAnchor.offset().top},'slow');
});

有一点需要注意，如果有问题的H2在屏幕上已经可见，它将不会向上滚动到任何内容，只有当它的关闭屏幕将向上滚动到它时。如果需要，向下滚动将始终移动屏幕。

Answer 2

代码的问题是counter的范围是prev_next_scrolling()，因此each()方法运行的所有函数都将使用变量的相同实例。每次增加counter时，所有地点都会被使用。

你可以通过在处理特定元素的函数中引入一个局部变量来解决这个问题 - 或者实际上，你不必这样做因为jQuery已经非常明确地将你作为each()可调用的可选参数提供给你。见http://api.jquery.com/each/

所以这是正确的代码（http://jsfiddle.net/2zM3Q/3/）：

var scrollTo = function(element) {
    $('html, body').animate({
        scrollTop: element.offset().top
    }, 100);
}

function prev_next_scrolling() {
    var articles = $("article.post"),
        counter = 0;

    articles.each( function(index) {

        var articles = $(this);
        $('.next-btn', articles).click( function() {
            scrollTo($('article.post').eq(index + 1));
        });

        $('.prev-btn', articles).click( function() {
            scrollTo($('article.post').eq(index - 1));
        });
        counter++;

    });
}
prev_next_scrolling();

还有一些问题：它没有检查它是否已经是第一个/最后一个帖子，如果它已经在页面的末尾，它显然不会再滚动，造成“破碎”的幻觉链接（因为点击后似乎没有发生任何事情。）

上一页和下一页滚动到下一篇文章

2 个答案: