jQuery UI Akkordeon Fokus auf geöffnete Artikel

Question

Ich habe das Problem, wo, wenn es viel Text in einem der Akkordeon Teile beim Öffnen des nächsten Teils (und kollabiert den offenen Teil) die Scroll-Position ist weg. Hilfe?

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

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

Answer 1

Verwendung activate Methode, um scroll zu der Position, wo header vorhanden ist, sobald die panel geöffnet wird.

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

DEMO HERE

Answer 2

am Ende mit:

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

DEMO HERE

Answer 3

Diese beiden Antworten sind in Ordnung. Ich würde es für mit Animieren:

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

ich eine kompliziertere Lösung haben, die Animation zur gleichen Zeit passieren kann, wenn die Platte öffnet.

Ich speichere die Positionen der Scrolltops, die ich möchte, wenn das Akkordeon zum ersten Mal geöffnet wird, und verwende dann die beforeActivate-Methode zum Scrollen. Hier ist der Code:

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; 
    } 
    }); 
} 

Hier ist die demo.