jQuery UI accordion scroll to active section

Question

I'm using the jQuery UI accordion, and i'm just wondering if it's possible to configure it to scroll to the start of the active div - as I'm using it with quite a bit of content, and at the moment they're opening, but the user has to scroll up to see the content.

<div class="accordion">
    <h3>Section Title</h3>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur ipsum vel nibh iaculis, sit amet euismod felis tincidunt. Donec pretium pulvinar condimentum. Donec sit amet placerat turpis. Sed vel lacus lectus. Suspendisse sodales odio eu libero eleifend porta. Pellentesque auctor, orci ut rhoncus ornare, felis sem lacinia arcu, in pellentesque sapien lorem faucibus metus. Mauris felis metus, convallis sed volutpat eu, posuere non elit. Fusce consequat ipsum turpis, ac convallis nisi ultricies eu. Phasellus vehicula justo augue, et pellentesque odio porta at. Phasellus tincidunt vitae velit in pellentesque. Ut venenatis blandit quam, at gravida erat ullamcorper at. Sed varius eleifend ligula et eleifend. Sed tristique tortor ipsum, eu laoreet nunc euismod in. Phasellus egestas nibh non semper condimentum. Praesent pellentesque leo et turpis fermentum, vitae eleifend velit rutrum. Quisque et nunc at odio accumsan sodales.</p>
        <p>Aliquam enim enim, rhoncus sed malesuada at, interdum pulvinar massa. Vestibulum eget felis diam. Nunc gravida massa quam, in suscipit diam congue ut. Pellentesque quis nunc vitae lectus adipiscing porttitor. Phasellus eget iaculis enim. Nulla sed augue pretium, tempus ipsum ut, sodales metus. Donec faucibus varius neque vitae gravida.</p>
    </div>
    <h3>Section Title 2</h3>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur ipsum vel nibh iaculis, sit amet euismod felis tincidunt. Donec pretium pulvinar condimentum. Donec sit amet placerat turpis. Sed vel lacus lectus. Suspendisse sodales odio eu libero eleifend porta. Pellentesque auctor, orci ut rhoncus ornare, felis sem lacinia arcu, in pellentesque sapien lorem faucibus metus. Mauris felis metus, convallis sed volutpat eu, posuere non elit. Fusce consequat ipsum turpis, ac convallis nisi ultricies eu. Phasellus vehicula justo augue, et pellentesque odio porta at. Phasellus tincidunt vitae velit in pellentesque. Ut venenatis blandit quam, at gravida erat ullamcorper at. Sed varius eleifend ligula et eleifend. Sed tristique tortor ipsum, eu laoreet nunc euismod in. Phasellus egestas nibh non semper condimentum. Praesent pellentesque leo et turpis fermentum, vitae eleifend velit rutrum. Quisque et nunc at odio accumsan sodales.</p>
        <p>Aliquam enim enim, rhoncus sed malesuada at, interdum pulvinar massa. Vestibulum eget felis diam. Nunc gravida massa quam, in suscipit diam congue ut. Pellentesque quis nunc vitae lectus adipiscing porttitor. Phasellus eget iaculis enim. Nulla sed augue pretium, tempus ipsum ut, sodales metus. Donec faucibus varius neque vitae gravida.</p>
    </div>
</div>

http://jsfiddle.net/nQgXC/2/

Answer 1

Here is something I came up with using scrollTop and the jQuery accordion activate event.

$(function() {
   $( ".accordion" ).accordion({
      activate: function(event, ui){
           var scrollTimer = (Math.abs(($('body').scrollTop()-ui.newPanel.offset().top-45)/100));
           $('html, body').animate({
              scrollTop: ui.newPanel.offset().top-45
           }, scrollTimer*400);
      }
  });
});

http://jsfiddle.net/nQgXC/7/