gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 12:50:16 25 4
gpt4 key购买 nike

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

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

最佳答案

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

这是 fiddle

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

这应该让你开始

关于javascript - 通过单击按钮向下滚动列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16905501/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com