title: jQuery accordion + scrollTo - need accordion to scroll back into focus
body: <p>was wondering if anyone could help.</p>
  
  <p>I'm using an accordion to display a list of sub-categories on a classifieds website, there are 3 main categories - we'll call them X, Y, Z.</p>
  
  <p>My problem is that the sub-category lists can be quite long - and aren't consistent between X, Y, Z. Currently, when clicking on header X - the accordion extends way beyond the fold so obviously the user will scroll down the page. When the user clicks Y - currently with a lot smaller sub-category list, the accordion will close up revealing Y's sub-category list however the focal point will not be on the opened Y accordion - the window stays at the bottom where sub-category X finished.</p>
  
  <p>Is there some way of directing the user back to the top of the ul.accordionMenu?</p>
  
  <hr>
  
  <p>JS is here:</p>
  
  <pre><code>jQuery.fn.initMenu = function() {   
      return this.each(function(){  
          var theMenu = $(this).get(0);  
          $('.acitem', this).hide();  
          $('li.expand &gt; .acitem', this).show();  
          $('li.expand &gt; .acitem', this).prev().addClass('active');  
          $('li a', this).click(  
              function(e) {  
                  e.stopImmediatePropagation();  
                  var theElement = $(this).next();  
                  var parent = this.parentNode.parentNode;  
                  if($(parent).hasClass('noaccordion')) {   
                      if(theElement[0] === undefined) {  
                          window.location.href = this.href;  
                      }  
                      $(theElement).slideToggle('normal', function() {  
                          if ($(this).is(':visible')) {  
                              $(this).prev().addClass('active');  
                          }  
                          else {  
                              $(this).prev().removeClass('active');  
                          }     
                      });
                      return false;  
                  }  
                  else {  
                      if(theElement.hasClass('acitem') &amp;&amp; theElement.is(':visible')) {  
                          if($(parent).hasClass('collapsible')) {  
                              $('.acitem:visible', parent).first().slideUp('normal',  
                              function() {  
                                  $(this).prev().removeClass('active');  
                              }  
                          );  
                          return false;   
                      }  
                      return false;  
                  }
                  if(theElement.hasClass('acitem') &amp;&amp; !theElement.is(':visible')) {          
                      $('.acitem:visible', parent).first().slideUp('normal', function() {  
                          $(this).prev().removeClass('active');  
                      });  
                      theElement.slideDown('normal', function() {  
                          $(this).prev().addClass('active');  
                      });  
                      return false;  
                  }  
              }  
          }  
      );  
  });  
  };  
  
  $(document).ready(function() {$('.accordionMenu').initMenu();});  
  </code></pre>
  
  <hr>
  
  <p>Any help would be greatly appreciated - I have searched on here and tried a few of the the suggestions however nothing seems to be working.</p>