scrollTop - weird results

Question

I have a div that I have coded to scroll "automatically" using scrollTop. I am getting some weird results.... Every time I click the button the scrolling toggles back and forth.(please see the jsFiddle because I'm sure I am not explaining myself very well. If you can tell me what is happening, and not just how to fix it, I would appreciate it. I have it set like this : (by the way, on my actual site, I will not have a button, I will actually be triggering the i++ with keyboard events).

$(function () {

  var i = 0;

  $('#submit').click(function () {

      i++;

      if (i > 0) {
         $('#textOne').scrollTop($('#s3').offset().top);
      }
  });

});

http://jsfiddle.net/bdenzer/Yu5Jz/7/

Answer 1

Think about what offset.top means intuitively. All it gives you is the relative top position of that element from the document top. So when you click it once, the relative height of that element from the top of the document goes down to 0! What you want to set the scroll top of the div to is the difference between the scrollTop of the outer div and the scrollTop of the $('#s3') element.