Question

我正在尝试进行导航。单击“下一个帖子”按钮，然后将窗口滑动到#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都作为变量，然后在点击时增加了索引并从该全局变量中选择了该索引：

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/

每次点击如何滑动到下一个元素？

1 个答案: