Menu icon Foundation
Responsive Accordion Tabs Scrolling to Bottom of Page on Mobile

I'm using the Responsive Accordion Tabs in Foundation 6 and I'm having an issues with the behavior on mobile. 

When switching between accordions the page will end up either somewhere in the middle of the panel content or at the bottom of the page. 

I want the page to scroll to the top of the active accordion, but the script I've been using isn't working. 

$(".accordion").on("up.zf.accordion", function(event) {
   setTimeout(function(){
      $('html,body').animate({scrollTop: $('.is-active').offset().top}, 'slow');
        }, 250);
});

The script does work on the accordions, but NOT on the Responsive Accordion Tabs.

You can view the page here - http://hallmarkedu.wpengine.com/about/hallmark-difference/

Any help would be greatly appreciated!!

 

responsive accordion tabsaccordionstabs

I'm using the Responsive Accordion Tabs in Foundation 6 and I'm having an issues with the behavior on mobile. 

When switching between accordions the page will end up either somewhere in the middle of the panel content or at the bottom of the page. 

I want the page to scroll to the top of the active accordion, but the script I've been using isn't working. 

$(".accordion").on("up.zf.accordion", function(event) {
   setTimeout(function(){
      $('html,body').animate({scrollTop: $('.is-active').offset().top}, 'slow');
        }, 250);
});

The script does work on the accordions, but NOT on the Responsive Accordion Tabs.

You can view the page here - http://hallmarkedu.wpengine.com/about/hallmark-difference/

Any help would be greatly appreciated!!