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

Posted 2023-05-08

【中文标题】单击时容器中的 jQuery scrollTop 只能工作一次

【英文标题】：jQuery scrollTop in container on click only works once

【发布时间】：2016-09-02 05:35:57

【问题描述】：

我正在尝试使用最简单的 jQuery 制作各种内容滑块，无需插件，也无需为每个 div 分配 id。

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

#container 外的 div #down 应该在单击时使 #container 滚动到每个 .sects。这是我的 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 新手，所以请解释一下我缺少什么！

【问题讨论】：

看看这个帖子：***.com/a/28052027/6294054

@J.C.Fong 谢谢你指导我做这个！我阅读并理解了他们示例中 jQuery 背后的逻辑，并将 jQuery 应用到我的布局中，但它的工作方式不一样。它可能与我的 div 高度有关，但我不知道为什么它不能正常工作jsfiddle.net/vq23tku7/14

【参考方案1】：

我认为你错过了容器应该根据滚动的多少来保持滚动，你的代码只向下滚动到 1 .sect 的高度，它应该是这样的：

ScrollTop：滚动+高度

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

【讨论】：

非常感谢您！我没有足够仔细地阅读 scrollTop 文档，但现在我已经阅读了，这是有道理的！ scrollTop 是元素滚动条的位置。

很高兴我能帮上忙。