滾動單擊向上或向下按鈕

Question

當DIV的內容我想創建一個像下面一個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？

Answer 1

很可能this link會對你有幫助嗎？

它使您能夠滾動元素一定posistion，e.g

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

請注意，您的jQuery插件，所以你必須檢查你的jQuery有它們已經或沒有。

希望這可以幫助你。

Answer 2

我爲你創建了兩個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'); 
    }); 

ⅰ）滾動樣行爲演示

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

ⅱ）可擴展div來顯示下一個元素演示

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