单击向上或向下按钮时滚动div内容[重复]

Posted 2021-05-04

这个问题在这里已有答案：

• jQuery scroll to element 28回答

我想创建一个如下所示的div：

<div id="upButton">&nbsp;</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">&nbsp;</div>

根据上面的代码，#divWithExcessiveContent的内容应该只有，或许"content number 20"，其余的隐藏。当点击#downButton时，div的内部应向下滚动，显示"content number 20"下面的内容。

我怎么能用jQuery做到这一点？

答案

我已经为你创建了两个jsFiddles。希望这是你想要的项目列表

您可以通过引入另一个容器div并调整高度/边距顶部和底部来滚动/显示下一个。

<div id="upButton">&nbsp;</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>

jQuery的：

var i = 0;
$('div#downButton').click( function() {
    i = i - 20;
   $('div#divWithExcessiveContent').css('margin-top', i + 'px');
  });

i）像行为演示一样滚动

http://jsfiddle.net/vendettamit/4xuV4/

ii）可扩展div以显示下一个元素演示

http://jsfiddle.net/vendettamit/kmHPk/

另一答案

可能qazxsw poi对你有帮助吗？

它使您能够将元素滚动到某个位置，例如

this link

请注意，它是jQuery的插件，所以你必须检查你的jQuery是否已经拥有它们。

希望这对你有所帮助。