[jQuery] How best to achieve this slideout effect?

[Jeroen Coumans]

Hi,

I have a large area at the top of a page which slides out with a
toggle. The toggle is at the top of the page, and the area slides out
at the top, pushing the toggle down. In order to close it, you have to
scroll down, after which the area slides back up. But then, your
position on the page is somewhere in the middle, which is quite
confusing for our users. I tried to add a scroll function in order to
solve it, but I'm not sure what the best solution is.

Initiate the scroll after the slide toggle:

$('.toggle').click(function() {
  $('#slideout').slideToggle('slow', function() {
    $('#slideout').ScrollTo('slow');
  });
});

This has an even more confusing effect: your position in the document
stays the same, but the slideout area slides up, causing the document
to scroll down. Then the ScrollTo kicks in, pushing you to the top.
Not good.

Attach a scroll right after the slide toggle:

$('.toggle').click(function() {
  $('#slideout').slideToggle('slow').ScrollTo('slow');
});

This is slightly better, but still not good enough. What I'd really
like is to first scroll to the top, and then slide up, like this:

$('.toggle').click(function() {
  $('#slideout').ScrollTo('slow').slideToggle('slow');
});

But the slide and the scroll are seemingly initiated at the same time
instead of after each other. Putting the slide in the scroll function
will disable the sliding (I'm not sure I understand why though).
Anybody want to clue me in?

Thanks,

Best wishes,
Jeroen Coumans
www.jeroencoumans.nl