scrollTop() problems

scrollTop() problems

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 : 

$(function () {

    var i = 0;

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

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

});