jQuery滚动按钮，受限于内容的数量

jQuery Scroll Buttons that are limited by the amount of content

本文关键字：于内容 滚动 按钮 jQuery      更新时间：2023-09-26

我是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上下，但这不是链接到实际的文本量。我该如何重新编码，使它能够滚动，但它受文本量的限制?

谢谢!

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

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');
});
相关文章：