Question

I am using jquery ui with the accordion feature running. I have a <h3></h3><div></div> with a lot of data in it which fills the page vertically. When you scroll down to click and open the next accordion selection it pulls way up the page, therefore hiding some of the content until I scroll back up.

Is there a way to prevent this? A way to on click make the currently selected h3 tag take the user to the top of the <h3> ?

EDIT: The main idea I am looking for here is making sure the <h3></h3> clicked on is not out of the viewing area. Ideally I’d like it to be about 50 or so px down from the top.

Here is a Fiddle of the Progress: http://jsfiddle.net/rwyvh/

Answer 1

Here is the jsFiddle. I had to use ui.newHeader to get the position inside the change event.

$("#accordion").accordion({
    autoHeight: false,
    collapsible:true,
    navigation:true,
    active:false,
    change: function(event, ui) {
        $(window).scrollTop(ui.newHeader.position().top - 50);
    }
});​