jquery - 到达正文末尾后，向下滚动不会重复

Question

我试图从 div 的拳头再次重复滚动，但它只在页面加载时工作一次。

<div class="content">
  <div class="next-section blue">First Section</div>
  <div class="next-section red">Second Section</div>
  <div class="next-section green">Second Section</div>
  <div class="next-section yellow">Second Section</div>
</div>
<button class="down-btn">Click to go to the next section</button>

var i = 0;
$('.down-btn').on('click', function(e) {
  e.preventDefault();
  i++;
  var offset = $("div.next-section").eq(i).offset().top;
  $('html, body').stop().animate({
    scrollTop: offset
  }, 400);
});

所以，当滚动结束时，点击这个按钮，应该会从第一部分重新开始 链接:https://jsfiddle.net/uj91djeL/1/

Answer 1

你应该在索引变量 i 到达末尾时将其重置为 0，即等于所有部分的长度。

var i = 0;
$('.down-btn').on('click', function(e) {
  e.preventDefault();
  i++;
  var nextSection$ = $("div.next-section") 
  if(i === nextSection$.length) i=0;
  var offset = nextSection$.eq(i).offset().top;
  $('html, body').stop().animate({
    scrollTop: offset
  }, 400);
});

检查 this fiddle