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

到达主体末端后，向下滚动不会重复

1 个答案: