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

Question

I have a table that shows additional information for each row through jQuery slideDown when the row is pointing to the mouse. When the mouse is deleted, the information is deleted using the slide module.

This works well, but when I click the last element on the page, it slides down below the bottom of the browser window. If the user scrolls with the mouse or similar, they can see the information, but if they move the mouse to move the scroll bar, the information disappears.

Is there an easy way in jQuery to make sure that the page scrolls down to display information while running slideDown or do I have to attach a solution to it?

Answer 1

You can try to understand how deep the last line calculates its vertical position (top) and its height. If this value passes the current scroll, you will go to that value.

// Not tested

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