Slowly scroll the content of a div on hover and stop on mouseoff

Slowly scroll the content of a div on hover and stop on mouseoff

Please take a look at this website
I'm trying to implement two arrows on top and bottom of the gallery so
when people mouse over the arrows, the content would scroll top and bottom
respectively.
Here is the code I'm currently using that scroll the content down when you
hover over the bottom arrow. But there are two issues with it:
I want the scrolling to stop when the user mouses off
Hopefully do not display the arrow(s) if there is no more content left to
scroll
if ( $("body").hasClass('projects') ) {
$("#jig1").height($(document).height() - 187);
$("#scroll-to-bottom").hover(
function () {
$("#jig1").animate({ scrollTop: $(document).height() }, 10000);
},
function () {
}
);
}
Can anyone offer an improved solution?