通过单击按钮向下滚动列表答案

【问题标题】：Scroll down on a list by clicking on a button通过单击按钮向下滚动列表
【发布时间】：2013-05-30 02:54:23
【问题描述】：

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

我正在使用这个 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);
    });
});

【问题讨论】：

标签： javascript jquery html css web

【解决方案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);
    });
});

这应该让你开始

【讨论】：