moving a div when required

I want to move a div up/down wrt another div. Just like News and events div in the website neduet (screen below) I searched the web and found some good links here and here but the issue is if i click up up up it goes up and disappears at some point.
what i want is when i press or hover a button, it checks the div position. if the div is hidden up then it should move up else no action should be performed. The link of neduet is a good example of that.

Edit: I am newbie to javascript and jquery so a working example or a link might be helpful.

Im not the best with math, but basically you need to find out how much your scrolling content has moved, and stop it from moving when it has moved too far up or down. I have created a similar thing to what yo umay be trying to achieve, here http://codepen.io/lukeocom/pen/nHuri

I get the height of the container and the height of the content, and then check that the amount the content has scrolled minus the height of the container, is less than the height of the content. It's all very confusing to my math weak brain, but perhaps you can figure out an easier method. At any rate, my example works.

You need to be careful with how much you scroll the content by, as well as how quick the animation is completed, and how often the interval is fired.

I'll attempt to clean up the working code example, but here it is...

var scrollamnt = 0, timer, $content = $('#content');
var theoff, scroll = true;

var sHeight = $content.height(), 
    cHeight = $('#scrollC').height(),
    oHeight;

$('#up, #down').bind('mouseover', function() {
    $this = $(this).attr('id');

    timer = setInterval(function() {
        theoff = $content.offset();      
        oHeight = (-theoff.top + cHeight);


      if ($this === 'down' && (oHeight < sHeight)) {
            scrollamnt -= 10;
            scroll = true;
        } else if ($this === 'up' && scrollamnt < 0) {
            scrollamnt += 10;
            scroll = true;
        } else
            scroll = false;

        if (scroll) {
            $content.animate({
                'margin-top' : scrollamnt
            }, 0, 'linear');
            //end animate
        }//end if
    }, 10);
    //end interval*/

}).bind('mouseout', function() {
    clearInterval(timer);
});