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）中，为它设置一个高度，然后滚动 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);
    });
});

这应该让你开始

于 2013-06-03T20:50:06.630 回答