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?

Waistband

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);
}

Jerroldjerroll

Close enough for a tick. Your code doesn't quite work (checks the top of the page rather than the bottom) but it got me playing and this is the final working tested version I came up with. function slide_and_scroll(obj) { var verticalLimit = obj.offset().top + obj.height() ; var currentVerticalScroll = $(window).scrollTop() + $(window).height(); if (verticalLimit > currentVerticalScroll){ var scrollTo = verticalLimit - $(window).height(); $("html:not(:animated),body:not(:animated)").animate({scrollTop: scrollTo}, 500); } Sorry, looks awful as a comment. – Waistband

I also borrowed a little from here: oncemade.com/animated-page-scroll-with-jquery – Waistband