如何在每次单击时滑到下一个元素？

Question

我在试着做邮政导航。单击"next“按钮，然后将窗口滑动到#post-n元素。但是邮政号码是随机的，不是等级的。我可以做第一张幻灯片，但不能做其他幻灯片。

​

$('.next-post').click(function(e) {
    e.preventDefault();

    $([document.documentElement, document.body]).animate({
        scrollTop: $("#post-2").offset().top
    }, 500);

});

.post {
  display: block;
  height: 500px;
  width: 500px;
  background-color: #2196F3;
  margin-bottom: 30px;
}

.next-post {
  position: fixed;
  background-color: #f44336;
  color: #fff;
  padding: 5px;
  text-decoration: none;
  border-radius: 5px;
  bottom: 15px;
  left: 50%;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<article id="post-1" class="post"></article>
<article id="post-2" class="post"></article>
<article id="post-3" class="post"></article>
<article id="post-4" class="post"></article>
<article id="post-5" class="post"></article>
<article id="post-6" class="post"></article>

<a href="#" class="next-post">Next Post</a>

​

下面是JSFiddle：https://jsfiddle.net/xpvt214o/514002/

Answer 1

我跟踪当前post索引，并将所有查询的post作为var，然后在单击时增加索引，并从该全局var中选择该索引：

var currentPostIndex = 0;
var allPosts = $(".post");

$('.next-post').click(function(e) {
    e.preventDefault();

    currentPostIndex++;
    $([document.documentElement, document.body]).animate({
        scrollTop: $(allPosts[currentPostIndex]).offset().top
    }, 500);
});

https://jsfiddle.net/35w9ze2s/5/