I'm trying to scroll a div up or down when hovering over the respective arrows. I also want to be able to jump down the div when the buttons are clicked (think clicking the windows scroll arrows rather than dragging the scroll bar).

The scrolling works but the jumping doesn't. scrollTop() keeps retuning 0.

Here's the code:

function startScrollContent()
{
   if ($('.haccordion-opened').prev('.header').find('div').attr('title') != 'dontscroll' && $('.haccordion-opened span.arrow').length == 0)
   {
      $('.haccordion-opened').append('<span class="arrow down" style="position: absolute; bottom: 5px; left: 260px; font-size: 9pt;">&#9660;</span><span class="arrow up" style="position: absolute; bottom: 5px; left: 280px; font-size: 9pt;">&#9650;</span>');

      $('.content span.arrow').hover(function()
      {
         direction = ($(this).hasClass('up')) ? '-=' : '+=';
         $('.content .padding').animate({scrollTop: direction + $('.content .padding').css('height')}, 5000);
      }, function()
      {
         $('.content .padding').stop();
      });

      $('.content span.arrow').click(function()
      {
         $('.content .padding').stop();
         direction = ($(this).hasClass('up')) ? '-' : '+';

         alert($('.content .padding').scrollTop());
         //$('.content .padding').scrollTop($('.content .padding').scrollTop + direction + 100);
      });
   }

   return;
}

How can I get the jump part working?