单击容器中的jQuery scrollTop只工作一次

Question

我试图用最简单的jQuery制作一个内容滑块，不需要插件，也不需要为每个div分配id。

我有一个固定位置#container，它是页面的100%宽和45%高，包含5个称为.sect的div。所有5个.sect都是容器的100%宽度，也是页面的45%高度，这意味着当滚动到.时，1个.sect将填充#container的可见部分

#container之外的div #down应该在单击时使#container滚动到。sect s。这是我对它的jQuery。我将scrollTop的值设置为.sect的高度，这样#container每次点击时都会滚动每个教派的确切高度。

$('#down').on('click', function(e) {
    e.preventDefault();
    $('#container').animate({ scrollTop:$('.sect').height()  })
});

第一次点击#down时，#container从视图中的第一个.sect滚动到第二个.sect，没有任何问题，但在那之后，#down不再做任何事情。jsfiddle-我认为html和css并不引人注目。我是jQuery的新手，所以请解释我缺少什么！

Answer 1

我想你忽略了容器应该根据它所做的滚动量来保持滚动，你的代码只向下滚动到1的高度。sect它应该是这样的：

滚动顶部：滚动+高度

scrollTop: $("#container").scrollTop() + $(".sect").height();