jQuery UI Accordion专注于打开的项目

Question

我遇到的问题是，如果在打开下一部分（并折叠打开部分）时手风琴部分中有很多文字，则滚动位置偏离。 救命？

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

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

Answer 1

打开panel ，使用activate方法scroll到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

这两个答案都很好。 我考虑用以下方式设置动画：

$('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;
    }
  });
}

这是演示 。