Accordion not scrolling correctly to expanded element

Question

I have accordion and I am trying to scroll to top of active, but now the problem is when I open one and then try to open another the offset not working properly. But if all of them are collapsed and try to expand some of them it's working. The problem is only when I have expanded one and try to expand another.

<div class="faqs">
   <ul>
     <li class="q"><a href="#"> Question </a></li>
     <li class="a"> Answer </li>
  </ul>

   <ul>
     <li class="q"><a href="#"> Question </a></li>
     <li class="a"> Answer </li>
  </ul>
</div>

jQuery('.faqs ul').each(function(e) {
  var question = jQuery(this).find('li.q a');
  var answer = jQuery(this).find('li.a');

  jQuery(question).click(function(e) {
    e.preventDefault();
    jQuery(this).closest('ul').siblings().removeClass('expanded').find('li.a').slideUp(500);
    jQuery(this).closest('ul').toggleClass("expanded").find('li.a').slideToggle(500);
    jQuery("html,body").animate({scrollTop: jQuery(question).offset().top },300); 
  });
});

Answer 1

Wrap animate function inside setTimeout.

  setTimeout(function(){ 
    jQuery('html,body').animate({scrollTop: jQuery(question).offset().top}, 600);
  }, 500);