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 -->

正如您所看到的，它只会向上或向下移动css margin-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');
});

受内容量限制的jQuery Scroll Buttons

1 个答案: