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

Question

我正在尝试使用最简单的jQuery创建一个内容滑块，没有插件，也没有为每个div分配ID。

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

点击#down以外的#container，应该#container滚动到每个。sect。这是我的jQuery。我将scrollTop的值设置为.sect的高度，这样#container将在每次单击时滚动每个sect的确切高度。

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

第一次点击#down，#container从第一个.sect滚动到第二个.sect没有任何问题，但在此之后，#down }不再做任何事了。 jsfiddle - 我认为html和css并不值得注意。我是jQuery的新手所以请解释我错过的内容！

Answer 1

我认为你错过了容器应该继续滚动，具体取决于它完成了多少滚动，你的代码只会向下滚动到1的高度。它应该是这样的：

ScrollTop：滚动+高度

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