I'm a big fan ov 8020.com and my goal is to create a porfolio with the same functionality like the one they have. Here is my markup

This section should be hidden

 <section id="work-container">
<div id="work-list-51" class="work-details">
<h1>
<div class="close-project">
</div>
<div id="work-list-52" class="work-details">
<h1>
<div class="close-project">
</div>
<div id="work-list-53" class="work-details">
<h1>
<div class="close-project">
</div>
</section>

This section will hold the thumbnails. When you click a thumbnail you will scroll to the top and the div will slidetoggle.

    <ul id="work-list">
<li id="work-list-51"><a data-page="51" href="#work-list-51">
<img width="230" height="230" alt="Mariann Rosa" src="sites/default/files/styles/square_thumbnail/public/field/image/mariann.jpg">
</a></li>
<li id="work-list-52"><a data-page="52" href="#work-list-52">
<img width="230" height="230" alt="Mariann Rosa" src="sites/default/files/styles/square_thumbnail/public/field/image/mariann.jpg">
</a></li>
<li id="work-list-53"><a data-page="53" href="#work-list-53">
<img width="230" height="230" alt="Mariann Rosa" src="sites/default/files/styles/square_thumbnail/public/field/image/mariann.jpg">
</a></li>
</ul>

I have come this far:

    $(document).ready(function(){
    $("#work-list a").click(function(event){
        event.preventDefault();  
        $('html, body').animate (
             {scrollTop: $('#top').offset().top}, 800
        ); 

});

$('#work-list a').click(function(e) {
    $('#work-container > div').hide();
    $(this.hash).slideToggle(1600);

});

});

It scrolls to top and the div becomes visible but it does not work correctly :)