0

私は 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 上下に移動するだけですが、これは実際のテキストの量にはリンクされていません。これをどのように再コーディングして、スクロールできるようにしますが、テキストの量によって制限されますか?

ありがとう！

4

1 に答える 1

0

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');
});
于 2013-05-22T19:28:46.313 に答える