javascript / Jquery .slideToggle - page does not scroll with content

Question

Hi guys,

I am using .slideToggle - Jquery to create an accordion and It works so far.

However, When div#slickbox goes down or up the page does not scroll with it. The page maintain scroll position.

I have 2 huge images(700px x 1300px) inside div#slickbox.

I want to scroll the page with the content, down & up.

How can I do this?

Thank you!

jquery

      $('#slickbox').hide();

  $('.more a').click(function() {

    $('#slickbox').slideToggle(3200);

    return false;

  });

HTML

<div id="slickbox">
 <div id="slide_show">
  <div id="slider">
       <ul>
    <li>
     <img alt="figure 1" src="images/fig1.jpg" width="700" height="1300">

  </div><!-- End slide_show -->
</div><!-- End slickbox -->

<div class="donate done">
    <h3 class="more"><a href="#" title="More"> More </a></h3>
</div> <!-- End button-->                                                    

Answer 1

You can store the .height() of the #slickbox element then use that as the animation for scrollTop, like this:

var height = $('#slickbox').hide().height();
$('.more a').toggle(function() {
    $('#slickbox').slideDown(3200);
    $('html, body').animate({ scrollTop: '+=' + height }, 3200);
    return false;
}, function() {
    $('#slickbox').slideUp(3200);
    $('html, body').animate({ scrollTop: '-=' + height }, 3200);
    return false;
});​

You can give it a try here, this will cause the page to scroll down the same number of pixels it expanded because of the images, and at the same rate since it has the same duration.