Scroll Div With increase height

Question

$(".clickable").each(function(idx, elem) { // register click for slides
    elem = $(elem);
    elem.click(function() {
       scaleClicked(elem); 
    });
});

function scaleClicked(elem) { // slide clicked
     var id = elem.attr("id"),
         num = id.slice(-1),
         postId = "post"+num,
         posts = $(".post");
    posts.each(function(idx, p) {
        if($(p).attr("id") == postId) { 
            scaleUp(p);
        }
        else {
             scaleDown(p);   
        }
    });

}

function scaleUp(item) {
    $(item).animate({height:1000},1000);
}
function scaleDown(item) {
    $(item).animate({height:30},1000);
}

I need to Increase div height on click, like example 01 and at the same time, That Div Must scroll to Top of the window Like Example 02 . Can You Help With This.

i tried few ways but when div increase the height, but it is scrolling to beyond the top level. but i need to stop div,when it scroll to top level of the window.

Answer 1

Instead of using an anchor to scroll like the example you gave you can scroll like this, for example to scroll to the bottom of a div:

$("#mydiv").animate({ scrollTop: $('#mydiv')[0].scrollHeight}, 1000);

To scroll to an item in the div you can find the position to scroll to in a number of ways, there's a good discussion here:

How do I scroll to an element within an overflowed Div?