How do I automatically scroll a page up if .slideDown goes of the bottom of the browser?

Question

I have a table that reveals additional information for each row via a jQuery slideDown when the row is mouseover'd. When the mouse is removed the information is removed with a slideUp.

This works nicely but when I mouseover the last item on the page it slides down below the bottom of the browser window. If the user scrolls down with a mousewheel or similar they can see the information but if they move the mouse pointer to slide the scroll bar the information disappears.

Is there a simple way in jQuery of ensuring that the page is scrolled down to show the information at the same time as the slideDown is executed or am I going to have to handroll a solution to this?

Answer 1

You could try to get how deep is the last row going by calculating his vertical position (top) and his height. If that value would pass the current scroll, then you scroll to that value.

//Not tested

var verticalLimit = $("#lastRow").offset().top + $("#lastRow").height() ;
var currentVerticalScroll = $(window).scrollTop();
if (verticalLimit > currentVerticalScroll){
    $("body").animate({ scrollTop: verticalLimit }, 500);
}