jQuery UIアコーディオンの開かれたアイテムに焦点を合わせる

Question

アコーデオンのパーツの1つに多くのテキストがあり、次のパーツを開くとき（開いた部分を折りたたむとき）、スクロールの位置がオフになるという問題があります。助けて？

https://jsfiddle.net/3u08r242/1/

$(function() { 
    $(".accordian") 
    .accordion({ 
     heightStyle: "content", 
     collapsible: true, 
     active: false 
    }); 
}); 

Answer 1

使用activatescrollにpanelが開かれるとheaderが存在する位置までの方法。

activate: function(event, ui) { 
     $('html,body').scrollTop($(ui.newHeader).offset().top) 
} 

DEMO HERE

Answer 2

使用して終了

：

activate: function(event, ui) { 
    $(ui.newHeader).get(0).scrollIntoView(); 
} 

DEMO HERE

Answer 3

これらの2つの答えは罰金です。私は、アニメーションパネルが開くと同時に発生することができ、より複雑なソリューションを持っている

$('html,body').animate({scrollTop: $(ui.newHeader).offset().top},'slow'); 

：私はそれをアニメーション検討したいです。

アコーディオンを最初に開いたときに必要なスクロールバーの位置を保存してから、beforeActivateメソッドを使用してスクロールします。コードは次のとおりです。

var accordionTops = {}; 

$(function() { 
    $(".accordian") 
    .accordion({ 
     heightStyle: "content", 
     collapsible: true, 
     active: false, 
     beforeActivate: function(event, ui){ 
     console.log(event); 
     console.log(ui); 
     // only trigger on opening a panel 
     if (ui.newHeader.hasOwnProperty(0)){ 
      var myId = ui.newHeader[0].id; 
      $('html,body').animate({scrollTop: accordionTops[myId]},'slow'); 
     } 

     }, 
     activate:function(event, ui){ 
     setAccordionTops($(this).parent()); 
     } 
    }); 

}); 

function setAccordionTops(parent){ 
    $('html,body').scrollTop(0); 
    // store hilight section tops for use in hilights animation 
    $('h3.ui-accordion-header', parent).each(function(){ 
    var myId = $(this).attr('id') 
    if (!(accordionTops.hasOwnProperty(myId))){ 
     accordionTops[myId] = $(this).offset().top; 
    } 
    }); 
} 

ここにはdemoがあります。