jQuery fisarmonica, scorrere l'inizio della scheda cliccata verso l'alto, non funziona se la scheda espansa è sopra quella su cui si fa clic?

Question

Ho un po 'di problemi nel far sì che la mia fisarmonica jquery faccia ciò che voglio.

Desidero sempre che la scheda su cui si fa clic venga spostata su una quantità fissa di pixel dalla parte superiore della pagina e l'ho fatta funzionare correttamente. Ma ogni volta che la scheda attiva si trova sopra la scheda che viene cliccata e se la pagina è già scorsa un po ', la parte superiore e le parti del contenuto della scheda cliccata vengono fatte scorrere verso l'alto oltre la parte superiore della pagina.

Questo è quello che ho ottenuto:

$(function() { 
    $("#accordion").accordion({ 
     autoHeight: false, 
     collapsible: true, 
     heightStyle: "content", 
     active: 0, 
     animate: 300 
    }); 
    $('#accordion h3').bind('click',function(){ 
     theOffset = $(this).offset(); 
     $('body,html').animate({ 
      scrollTop: theOffset.top - 100 
     }); 
    }); 
}); 

Ecco un fiddle per illustrare il mio problema,

Per esempio, hanno "Sezione 2" espansa, scorrere verso il basso e fare clic su "Sezione 3" scheda e tutto scorre fuori dalla pagina, l'altro modo funziona comunque.

E se si chiude la scheda attiva prima di aprirne una nuova, funziona anche bene, quindi sto assumendo che questo abbia qualcosa da fare con l'altezza della scheda di compressione che fa scomparire lo scroll alla funzione top !?

Spero che qualcuno possa aiutare, probabilmente mi avvicino a questo nel modo sbagliato. In realtà non so davvero cosa sto facendo mentre le mie abilità jquery sono limitate a una comprensione di base del taglio e dell'incollatura! ^^

Grazie in anticipo e tutti gli aiuti e l'area dei puntatori più che benvenuto! :)

Acclamazioni

Answer 1

Sì, è l'altezza della scheda thats sempre chiusi questo è la causa del problema.

La parte superiore della h3 selezionata cambia immediatamente dopo a causa del crollo di una scheda sopra di essa.

Una soluzione (uno cattivo, forse), è quello di innescare l'animazione di scorrimento dopo la fine dell'animazione collasso, vale a dire se l'animazione crollo è fissato per 300 ms, iniziare l'animazione di scorrimento dopo 310ms o qualcosa del genere.

$(function() { 
     $("#accordion").accordion({ 
      autoHeight: false, 
      collapsible: true, 
      heightStyle: "content", 
      active: 0, 
      animate: 300 // collapse will take 300ms 
     }); 
     $('#accordion h3').bind('click',function(){ 
      var self = this; 
      setTimeout(function() { 
       theOffset = $(self).offset(); 
       $('body,html').animate({ scrollTop: theOffset.top - 100 }); 
      }, 310); // ensure the collapse animation is done 
     }); 
}); 

Updated Fiddle

Answer 2

È possibile aggiungere una funzione attivata per la fisarmonica. In questo modo si innesca una volta completate le altre animazioni mostra/nascondi.

$(function() { 
    $("#accordion").accordion({ 
     autoHeight: false, 
     collapsible: true, 
     heightStyle: "content", 
     active: 0, 
     animate: 300, 
     activate: function(event, ui) { 
      try { 
       theOffset = ui.newHeader.offset(); 
       $('body,html').animate({ 
        scrollTop: theOffset.top 
       }); 
      } catch(err){} 
     } 
    }); 
}); 

il tentativo di cattura è richiesto come ui.newHeader è indefinito se si stanno crollando una scheda di fisarmonica aperto.