Jquery 单击向上或向下按钮时滚动div内容
我想创建一个如下所示的div:Jquery 单击向上或向下按钮时滚动div内容,jquery,html,scroll,Jquery,Html,Scroll,我想创建一个如下所示的div: <div id="upButton"> </div> <div id="divWithExcessiveContent" style="overflow: hidden; height: 20px;"> content number 1<br/> content number 2<br/> content number 3<br/> conte
<div id="upButton"> </div>
<div id="divWithExcessiveContent" style="overflow: hidden; height: 20px;">
content number 1<br/>
content number 2<br/>
content number 3<br/>
content number 4<br/>
...
content number 100<br/>
</div>
<div id="downButton"> </div>
内容编号1
内容编号2
内容编号3
内容编号4
...
内容编号100
根据上面的代码,#divithExcessiveContent
的内容应该只保留到,的“内容编号20”
,其余部分隐藏。单击#down按钮时,div的内部应向下滚动,显示下面的内容“内容编号20”
我如何使用jQuery做到这一点?可能会对您有所帮助
它允许您将元素滚动到特定位置,例如
$('#divWithExcessiveContent').scrollTo( {top:'-=100px', left:'+=100'}, 800 );
请注意,它是jQuery的插件,所以您必须检查jQuery是否已经有了它们
希望这对您有所帮助。我为您创建了两个JSIDdle。希望这就是你想要对物品清单做的事情
您可以通过引入另一个容器div并调整高度/边距顶部和底部以滚动/显示下一个来实现这一技巧
<div id="upButton"> </div>
<div id="container" style="overflow: hidden;height: 40px;">
<div id="divWithExcessiveContent" >
content number 1<br/>
content number 2<br/>
content number 3<br/>
content number 4<br/>
content number 5<br/>
...
content number 100<br/>
</div>
</div>
<br>
<div id="downButton" style="border:solid 1px;width:50px;">Button</div>
i) 类似滚动的行为演示
ii)显示下一个元素演示的可扩展div
var i = 0;
$('div#downButton').click( function() {
i = i - 20;
$('div#divWithExcessiveContent').css('margin-top', i + 'px');
});