Прокрутка вниз не повторяется после достижения конца тела

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

Итак, когда прокрутка достигла конца, тогдапри нажатии на эту кнопку, это должно начаться снова с первого раздела LINK: 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);
});

Проверить эту скрипку