2016-05-30 1 views

Antwort

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

+1

Danke! Das hat nicht funktioniert, als ich mich auf meinen vollständigen Code beworben habe, aber mich in die richtige Richtung geleitet habe. – kravits88

1

am Ende mit:

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

DEMO HERE

1

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.

Verwandte Themen