单击时容器中的jQuery scrollTop仅可使用一次 [英] jQuery scrollTop in container on click only works once

问题描述

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

I'm trying to make a content slider of sorts with the simplest jQuery possible, without a plugin and without assigning ids to each div.

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

I have a fixed position #container that is 100% width and 45% height of the page and contains 5 divs called .sect. all 5 .sect are 100% width of the container and are also 45% height of the page, which means that 1 .sect would fill the visible portion of #container, when scrolled to.

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

a div #down outside #container should, on click, make the #container scroll to each of the .sects. this is my jQuery for it. I set the value of scrollTop to the height of .sect so that #container will scroll the exact height of each sect every time it is clicked.

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

第一次单击#down时，#container毫无疑问地从第一个.sect滚动到第二个.sect，但是之后，#down不再执行任何操作. jsfiddle -我认为html和CSS并不明显.我是jQuery的新手，所以请解释一下我缺少的内容！

the first time #down is clicked, #container scrolls from the 1st .sect in view to the 2nd .sect with no problem, but after that, #down doesn't do anything anymore. jsfiddle - the html and css aren't notable, i think. I'm new to jQuery so please explain what i'm missing!

推荐答案

我认为您遗漏了容器应根据其完成的滚动次数继续滚动，您的代码仅向下滚动到1 .sect的高度.它应该像这样:

I think you are missing that the container should keep scrolling depending on how much of scroll it has done, your code only scrolls down to the height of 1 .sect it should be like:

ScrollTop:滚动+高度

ScrollTop: scrolled + height

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

这篇关于单击时容器中的jQuery scrollTop仅可使用一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！