Question

我希望能够通过单击按钮向下滚动列表。

我正在使用这个JSFiddle here

但是向下滚动整个页面。我想让它滚动一个列表，我开始它here，但它不起作用。谢谢！

<!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);
    });
});

Answer 1

列表不会滚动，因为列表已经是100％。要滚动它，你必须将它放在一个单独的容器（div）中为它设置一个高度，然后滚动div，而不是列表或html。

这是小提琴

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);
    });
});

这应该让你开始

单击按钮向下滚动列表

1 个答案: