我正在尝试从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/

#1楼 票数:0 已采纳

当索引变量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);
});

检查这个小提琴

  ask by alar translate from so

未解决问题?本站智能推荐:

1回复

主体的垂直滚动条到达后调用函数

我有一张父母桌 单击父表的复选框后,将生成一个子表,然后 单击该子表的复选框后,将生成另一个子表,届时将在主体上显示一个垂直滚动条,并在所有表上显示水平滚动条。 当正文的垂直滚动条可见时,我想隐藏表格的所有水平滚动条。
3回复

向下滚动时保持div在窗口中间可见,并在到达特定点后逐渐消失

我正在尝试使用jQuery和CSS做一个简单的视差效果。 我有2个长的div,一个是2000px ,另一个是1000px每这些div的一个有文字里面的孩子股利。 我想让这些子div居中在可见窗口的中间(不是div高度为2000px ,而是可见窗口),并保持居中并在中间,而我向下滚动,然后
2回复

我怎样才能使div滚动到其末端,Y轴[重复]

这个问题已经在这里有了答案: 在页面加载时滚动到Div的底部(jQuery) 12个答案 我有一个聊天室的div,已经可以滚动了。 但我希望它滚动到最后一次聊天。 这是加载时聊天框的外观。 但是我希望它像下面的图片一样加载时。 我怎样才能做到这一点? 感谢您
2回复

如何向下滚动页面,然后单击侧边栏的末端,使其粘在页面底部

我正在尝试重现此侧边栏: http://www.fastcodesign.com/3020546/innovation-by-design/would-steve-jobs-have-become-steve-jobs-using-a-computer-designed-by-st 看来
1回复

如果div的溢出Y到达底部,继续在主体上滚动?

当创建带有overflow-y: scroll的div时,我感到非常烦人overflow-y: scroll如果用户到达此div的末尾,则overflow-y: scroll将不得不将鼠标移到外面以继续在主页上滚动。 基本上,我需要这样的: 例如 如果您打开“购物的外观”并在该div上滚
2回复

当页面到达页面顶部时,如何使div向下滚动?

我知道标题有点令人困惑; D但基本上我想要做的就是在这个网站上清楚地展示http://9gag.com向下滚动并注意侧边栏,有2个广告一旦第二个广告到达页面顶部它开始向下滚动页面。 我想知道怎么做? html / css或jQuery解决方案是prefared。
1回复

滚动后如何隐藏主体的模式窗口居中?

我有模型对话框,而打开模型对话框则设置了身体overflow:hidden这使模型窗口仅显示一半。 onclose重置身体溢出。 主体高度大于窗口大小,并且滚动到某个位置比打开模式对话框更大。 如何获得中心显示模式对话框?
2回复

检测何时到达水平div的末端,然后停止

我已经为此奋斗了很长时间-我相信这会变得简单! 我有一个正在开发的系统,人们可以在其中将活动日历嵌入到自己的网站中。 这是通过jQuery直接加载到其页面中的。 该页面有一个div,它使用margin-left来“滚动”。 一个例子可以在这里看到: http://jsfiddle.