动画滚动到下一个/上一个帖子

Question

如何创建两个滚动浏览器到文章标题的按钮（“next”和“prev”）？

<div id="cycle-posts"> 
    <a id="next" href="#next"></a> 
    <a id="prev" href="#prev"></a> 
</div> 

<article>My first post</article> 
<article>My second post</article> 
<article>My third post</article> 
<article>My fourth post</article> 

如果它是相关的：在前几个之后，我的文章使用“无限滚动”加载。

这是我走到这一步，但它甚至还没有接近：

$('#cycle-posts a').bind('click', function (e) { 
    $articles = $('article'); 
    e.preventDefault(); 
    var totalArticles = $articles.length; 


    if ($(this).attr("id") == "next") { 
     new_index = ++current_index; 
    } else if ($(this).attr("id") == "prev") { 
     new_index = --current_index; 
    } 

    if (new_index > totalArticles) { 
     new_index = 0; 
    } 

    $articles.removeClass('current').eq(new_index).addClass('current'); 

    console.log(new_index+'/'+totalArticles); 

    // now scroll offset, find offset based on .current? 

}); 

Answer 1

在处理我们消除了current类，它实际上有它，然后我们选择下一个（或前一个）元素和元素我们添加current类（仅当它不是第一个或最后一个元素时）。

然后我们滚动到该元素，动画scrollTop，如here所述。

(function() { 
    var scrollTo = function(element) { 
     $('html, body').animate({ 
      scrollTop: element.offset().top 
     }, 500); 
    } 
    $('#next').click(function(event) { 
     event.preventDefault(); 
     var $current = $('#container > .current'); 
     if ($current.index() != $('#container > div').length - 1) { 
      $current.removeClass('current').next().addClass('current'); 
      scrollTo($current.next()); 
     } 
    }); 
    $('#prev').click(function(event) { 
     event.preventDefault(); 
     var $current = $('#container > .current'); 
     if (!$current.index() == 0) { 
      $current.removeClass('current').prev().addClass('current'); 
      scrollTo($current.prev()); 
     } 
    }); 
})(); 

You have a fiddle here

Answer 2

而不是试图计算出每一次点击当前索引，我觉得这是更好的使用功能，同时生产前向和后退单击处理程序也将索引存储为本地。这样既可以引用索引，也不需要即时计算。

请尝试以下

(function() { 
    var index = 0; 
    $('article:first').addClass('current'); 
    var moveOne = function (forward) { 
    var articles = $('article'); 
    articles.eq(index).removeClass('current'); 
    if (forward) { 
     index++; 
     if (index === articles.length) { 
     index = 0; 
     } 
    } else { 
     index--; 
     if (index < 0) { 
     index = articles.length - 1; 
     } 
    } 
    articles.eq(index).addClass('current'); 
    } 

    $('#next').click(function() { moveOne(true); }); 
    $('#prev').click(function() { moveOne(false); }); 

})(); 

小提琴：http://jsfiddle.net/5f74F/