jQuery animation Div Scroller

Question

Je Div avec 395px de la hauteur, et overflowhidden, comme ceci:

<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>​​​​​​​​​ 

Les boutons doivent faire défiler le contenu de la div, mais pas dans la souris plus, je veux un simple clic, faites défiler 132px de hauteur et avec EaseOutCubic. J'ai trouvé beaucoup de scroller, mais tous avec Mouse over, j'ai besoin d'eux travaillant avec le clic de la souris.

Answer 1

Vous pouvez utiliser quelque chose comme ça

<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>