Javascript 通过单击按钮向下滚动列表_Javascript_Jquery_Html_Css_Web

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

javascript jquery html css web

Javascript 通过单击按钮向下滚动列表,javascript,jquery,html,css,web,Javascript,Jquery,Html,Css,Web,我希望能够通过单击按钮在列表上向下滚动我正在使用这个JSFIDLE 但这会向下滚动整个页面。我想让它滚动列表代替，我开始了，但它不工作。谢谢 <!DOCTYPE html> <body> <div class="box"> <input type="button" value="Scroll" id="scroll" /> <ul> <li>Lorem ips

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

我正在使用这个JSFIDLE

但这会向下滚动整个页面。我想让它滚动列表代替，我开始了，但它不工作。谢谢

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



知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利
...
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利

$（文档）.ready（函数（）{
$（“#滚动”）。单击（函数（）{
$（'html，body'）。设置动画({
滚动顶部：'+=400'
}, 1000);
});
});

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

这是小提琴

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

这应该让你开始