Scrollable ul list up and down from links with classes
<p>I want to scroll a news article list up and down depending on which buttons is clicked</p>

<p>I wanted to adapt this way of animating if possible:</p>

<pre><code>function smoothAdd(id, text)
{
    var el = $('#scroller' + id);

    var h = el.height();

    el.css({
        height:   h,
        overflow: 'hidden'
    });

    var ulPaddingTop = parseInt(el.css('padding-top'));
    var ulPaddingBottom = parseInt(el.css('padding-bottom'));

    el.prepend('&lt;li&gt;' + text + '&lt;/li&gt;');

    var first = $('li:first', el);
    var last  = $('li:last',  el);

    var foh = first.outerHeight();

    var heightDiff = foh - last.outerHeight();

    var oldMarginTop = first.css('margin-top');

    first.css({
        marginTop: 0 - foh,
        position:  'relative',
        top:       0 - ulPaddingTop
    });

    last.css('position', 'relative');

    el.animate({ height: h + heightDiff }, 1500)

    first.animate({ top: 0 }, 250, function() {
        first.animate({ marginTop: oldMarginTop }, 1000, function() {
            last.animate({ top: ulPaddingBottom }, 250, function() {
                last.remove();

                el.css({
                    height:   'auto',
                    overflow: 'visible'
                });
            });
        });
    });
}

  $('.scrollUp').click(function() {
      smoothAdd('scrollUp', 'A new item');
  });
</code></pre>

<p>Example here: <a href="http://www.fiveminuteargument.com/blog/scrolling-list" rel="nofollow">http://www.fiveminuteargument.com/blog/scrolling-list</a></p>

<p>My HTML looks like this:</p>

<pre><code>  &lt;ul id="scroller"&gt;
      &lt;li class="current"&gt;&lt;span&gt;/&lt;/span&gt;&lt;a href="#article1"&gt;News Article Title&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;/&lt;/span&gt;&lt;a href="#article2"&gt;News Article Title 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;/&lt;/span&gt;&lt;a href="#article3"&gt;News Article Title 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="btnWrap"&gt;&lt;p&gt;&lt;a href="#arrow" class="scrollUp"&gt;Scroll Up&lt;/a&gt;
  &lt;a href="#arrow" class="scrollDown"&gt;Scroll Up&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
</code></pre>

<p>Can anyone point me in the right direction?</p>

<p>Basically maintain the animation style but keep it as a defined UL as per a normal carousel.  </p>
