javascript - 受内容数量限制的 jQuery 滚动按钮

Question

我是 javascript 和 jQuery 的新手，我写的代码有问题，它在内容之后滚动，我想不出如何让它受到内容数量的限制。

这是jQuery：

jQuery('.scrollup').click(function(event){
    jQuery(".entry-content-area").animate({ "margin-top": "+=150px" },'100');
});
jQuery('.scrolldown').click(function(event){
    jQuery('.entry-content-area').animate({ "margin-top": "-=150px" },'100');
});

这是 HTML（用于 WordPress）：

<div class="entry-content-box">
    <div class="entry-containment-area">
        <div class="entry-content-area">
            <p>CONTENT HERE</p>
        </div><!-- entry-content-area -->
    </div><!-- entry-containment-area -->
    <div class="scroll-area">
        <ul>
            <li>
                <button class="scrolldown"></button>
            </li>
            <li>
                <button class="scrollup">
                </button>
            </li>
       </ul>
    </div><!-- scroll-area -->
</div><!-- entry-content-box -->

如您所见，它仅将 cssmargin-top向上或向下移动 150px，但这与实际文本量无关。我将如何重新编码以使其滚动但受文本数量的限制？

谢谢！

Answer 1

我相信您正在尝试为scrollTop属性设置动画，而不是边缘顶部。假设您有一个溢出容器，其中包含一些导致容器溢出的文本，您可以为滚动顶部属性设置动画，以便内容在滚动容器内移动。

jQuery('.scrollup').click(function(event){
    jQuery(".entry-content-area").animate({ "scrollTop": "-=150px" },'100');
});
jQuery('.scrolldown').click(function(event){
    jQuery('.entry-content-area').animate({ "scrollTop": "+=150px" },'100');
});