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?