如何从上到下滚动li元素

我写了一个脚本，自动允许滚动的li元素从下到上。这是我在jsbin上的脚本。

我正在尝试实现从上到下滚动项目的相反效果，但到目前为止还没有成功。以下是我到目前为止所做的尝试。

$('#scroller').bind('touchmove',function(e){
      e.preventDefault();
      // Write code to scroll the items
      alert("Touch move occured");
});

function run() {
  /*  
    var prev = $("#scroller li:first-child");
    $.unique(prev).each(function(i) {
      $(this).delay(i*10).slideDown(function() {
        $(this).appendTo(this.parentNode).slideDown();
      });
    });
  */
  $("#scroller li:last").slideUp(function() {
        $(this).remove();
        $("#scroller").prepend($(this));
        $(this).slideDown();
    });
}
window.setInterval(run, 100);

相关HTML:

    <div id="wrapper">
        <div id="panels">
            <div  id="scroller">
                <ul>
                                      <li> Barley Wine </li>
                                      <li> Bitter Ale </li>
                                      <li> Brown Ale </li>
                                      <li> India Pale Ale </li>
                                      <li> Pale Ale </li>
                                      <li>list 1</li> 
                                      <li>list 2</li>
                                      <li>list 3</li>
                                      <li>list 4</li>
                </ul>
            </div>
        </div>
    </div>