关于jquery：单击向上或向下按钮时滚动div内容


Scroll the div content when clicking a up or down button

本问题已经有最佳答案，请猛点这里访问。

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

1
2
3
4
5
6
7
8
9
10
 

    content number 1<br/>
    content number 2<br/>
    content number 3<br/>
    content number 4<br/>
    ...
    content number 100<br/>

&nbsp;

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

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

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

你可以通过引入另一个容器div并调整高度/边距top＆amp; 底部滚动/显示下一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
&nbsp;


    content number 1<br/>
    content number 2<br/>
    content number 3<br/>
    content number 4<br/>
    content number 5<br/>
    ...
    content number 100<br/>



Button

jQuery的：

1
2
3
4
5
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/

可能这个链接对你有帮助吗？

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

1
$('#divWithExcessiveContent').scrollTo( {top:'-=100px', left:'+=100'}, 800 );

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

希望这对你有所帮助。