jQueryアコーディオン、クリックされたタブが上にスクロール開始されました。

Question

私のjqueryアコーデオンが私の望むことをするのにちょっとした問題がありました。

私はいつもクリックされているタブをページの上から一定量のピクセルにスクロールさせたいと思います。しかし、アクティブなタブがクリックされているタブの上にあるときはいつでも、ページがすでに少しスクロールされていると、クリックされたタブのコンテンツの上部と部分がページの上部を超えてスクロールアップされます。

これは私が得たものである：ここでは

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

はfiddleは、「セクション2」拡大を持って、たとえば、

を私の問題を説明するためだ、下にスクロールして「セクション3」タブと、それをクリックしてくださいすべてのページをスクロールし、それ以外の方法でも動作します。

新しいタブを開く前にアクティブなタブを閉じると、うまくいきますので、これはトップの機能にスクロールしてしまうタブの高さに何かがあると想定しています！

誰かが助けてくれることを願っています。おそらくこれは間違った方法です。 jqueryのスキルが基本的なカットアンドペーストの理解に限定されているため、実際に何をしているのか分かりません。 ^^

おかげさまで、ありがとうございました。 :)

乾杯

Answer 1

はい、タブのthatsのその高さは、問題の原因のthats閉じたばかり。

クリックされたh3の上端は、その上のタブが折り畳まれた直後に変更されます。

回避策（おそらく悪い）は、折りたたみアニメーションが終了した後、つまり折りたたみアニメーションが300msに設定されている場合は、310ms後にスクロールアニメーションを開始することです。

$(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

あなたはアコーディオンに活性化機能を追加することができます。そうすれば、他のアニメーションの表示/非表示が完了するとトリガーされます。あなたはオープンアコーディオンタブを崩壊している場合

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

ui.newHeaderとして必要とされるトライキャッチは未定義です。