3

ボタンをクリックしてリストを下にスクロールできるようにしたいと思います。

ここでこの JSFiddle を使用しています

しかし、それはページ全体を下にスクロールします。代わりにリストをスクロールさせたいのですが、ここから始めましたが、うまくいきません。ありがとう！

<!DOCTYPE html>
<body>
    <div class="box">
        <input type="button" value="Scroll" id="scroll" />
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
           ...
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        </ul>
    </div>
</body>

$(document).ready(function() {
    $('#scroll').click(function() {
        $('html, body').animate({
            scrollTop: '+=400'
        }, 1000);
    });
});
4

1 に答える 1

4

リストはすでに 100% であるため、リストはスクロールしません。スクロールするには、別のコンテナー (div) に入れ、高さを設定してから、リストや html ではなく div をスクロールする必要があります。

ここにフィドルがあります

http://jsfiddle.net/TN4wP/38/

divにcssを追加しました

#scroll {
    position: fixed;
    padding: 5px 10px;
}
.box{
height: 200px;
    overflow: auto;
}

アニメーションをdivのみで動作するように変更しました

$(document).ready(function () {
    $('#scroll').click(function () {
        $('.box').animate({
            scrollTop: '+=100'
        }, 100);
    });
});

これで始められるはずです

于 2013-06-03T20:50:06.630 に答える