jQuery的動畫事業部滾輪

Question

我有一個div高度395px和overflowhidden，像這樣：

<style> 
    ​#content { 
     width: 100%; 
     height: 395px; 
     overflow: hidden; 
}​ 
</style> 

<div id="content"> 
    1<br>2<br>3<br>4<br>......<br>29<br>30<br> 
    1<br>2<br>3<br>4<br>......<br>29<br>30<br> 
</div> 

<a href="#">UP</a> 
<a href="#">DOWN</a>​​​​​​​​​ 

的按鈕應該滾動div的內容，但不是在鼠標移過，我想一個單擊滾動132px的高度和EaseOutCubic。我發現了很多的滾動條，但所有鼠標都結束了，我需要他們使用鼠標點擊。

Answer 1

你可以使用類似這樣

<style> 
    ​#content { 
     width: 100%; 
     height: 395px; 
     overflow: scroll; 
}​ 
</style> 

<div id="content"> 
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 
    11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 
    21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br> 
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 
    11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 
    21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br> 
</div> 

<a href="#" class="up">UP</a> 
<a href="#" class="up">DOWN</a>​​​​​​​​​ 

<script type="text/javascript"> 
(jQuery.noConflict())(function($){ 
    $('a.up').click(function(){ 
    var newTop = $('#content').scrollTop() + 132; 
    //TODO: newtop not greater than height - 132 
    $('#content').animate({'scrollTop': newTop}, 250); 
    }); 
}); 
</script>