达到正文结束后向下滚动不重复

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);
});

检查这个小提琴