Responsive slidedown height on click

Question

This is my site: http://www.stilld.nl

Scroll down to the portfolio en click on an item. 2 things happens:

1. the details for the portfolio item clicked appear underneath the portfolio,
2. The page scrolls down towards the details of that portfolio item.

This is working fine, because I make it scroll down an amount of pixels.

PROBLEM: scall down your browser and you'll see the portfolio turning into item underneath each other. Now, when you click an item it scrolls down the amount of pixels I said it had to go down, but that's not far enough right now.

MY SOLUTION (which didn't work): instead of scrolling down an number I tried scrolling down to a CLASS. This should work, but the code isn't working. It just scrolls up to the top of the page. I think this happens because the scrolling down is called upon at the same time that CLASS appears (or maybe even earlier) so maybe my code doesn't see the CLASS in time... I hope I make sence. This is my first code (and using on :

$(document).ready(function(){
$(".portfolio").click(function () {
    if ($('#'+$(this).attr('target')).is(':visible')){
        $('#'+$(this).attr('target')).slideUp();        
    } else {
        $('.description').slideUp(); 
        $('#'+$(this).attr('target')).slideDown();        
        $('html, body').animate({scrollTop: $('#targetWrapper').offset().top + 600 }, 600);
    }

});
$(".close").click(function () {
    $('.description').slideUp();        
    $('html, body').animate({scrollTop: $('.p_img').offset().top }, 600);
});

});

WHAT I WANT:

I want this code to be transformed into a code that scrolls down to a class or ID. BUT, this has to happen after the CLASS or ID has appeared. I think that should be the solution.

Answer 1

reedit

add float:left; on div#wrapper_portfolio to have the real height of your portfolio

and change :

 $('html, body').animate({scrollTop: +($('#alldescriptions').offset().top) + 'px' }, 600);