Scrolling dynamically to the end of the page

Question

I have a link which animates some div's height when its hovered, but the div has a big height and it goes beyond the visible bottom-end of the screen.

I have to scroll to see the data and when I scroll I leave the hover area and the div toggles it's height to 0px.

How to automatically scroll to the end of the div when it toggles?

Answer 1

Try setting the DIV's scrollTop property to it's height, e.g.:

$("#theDiv").mouseover(function() {
    $(this).scrollTop($(this).height());
});

Answer 2

You can modify the scrollTop property of the body:

// Scroll all the way to the bottom
document.body.scrollTop = document.body.scrollHeight;