jQuery UI Accordion Scrolling issue

I have a page with several sections of significantly varying length within a jQuery UI Accordion. If I open a new section (which collapses one of the longer sections above), I'm left at the bottom of the page. Because the sections are of significant开发者_Go百科ly different heights, I can't use the autoheight feature without it looking very strange. Is there any way to use something like scrollto to automatically go to the top of the section I've just expanded?

---

You can bind a function to the accordionchange event and use jQuery scrollTop():

JavaScript

$(function () {
    $("#accordion").accordion({
        autoHeight: false,
        header: "h3"
    });

    $('#accordion').bind('accordionchange', function (event, ui) {
        $(window).scrollTop(ui.newHeader.offset().top);
    });
});

HTML

<div id="accordion">
    <div id="accordion-one">
        <h3><a href="#">First</a></h3>
        <div>Some lengthy text</div>
    </div>
    <div id="accordion-two">
        <h3><a href="#">Second</a></h3>
        <div>Less lengthy text</div>
    </div>
    <div id="accordion-three">
        <h3><a href="#">Third</a></h3>
        <div>Other text</div>
    </div>
</div>

I tested this in FF8.

Links

• Accordion change event
• jQuery scrollTop()