質問: 複数あるアコーディオンから一つクリックしたとき、クリックしたアコーディオンパネルへスクロールしたいのですが、 クリックしたとき閉じた状態でアコーディオンパネルまでの高さを取得してしまっており、クリックしたアコーディオンパネルが開くと同時にスクロールするため、変なところに画面がいってしまいます。 どうにか開いてから高さ取得を行って、スクロールするなんてことはできないのでしょうか? ``` Aタイトル コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ Bタイトル コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ、コンテンツ ``` jQuery ``` $(function(){ $('.main_toggle').click(function() { // メニュー表示/非表示 $(this).next('dd').slideToggle('fast'); $(this).toggleClass('main_open'); $("html, body").animate({scrollTop:$('.main_open').offset().top}, 500); // メニューをクリックしたら他のメニューを閉じる $('.main_toggle').next('dd').not($(this).next('dd')).slideUp(); $('.main_toggle').not($(this)).removeClass('main_open'); }); }); ```
回答: 検証してみました。 スクロールの挙動がこのソースから正確に再現できたか不安ですが `slide`の処理前または処理中に高さを取得しているために起こっている現象かもしれません。 `setTimeout`を使って、高さの取得&スクロールのタイミングをずらしてみるのはどうでしょうか。 ``` setTimeout(function(){ $("html, body").animate({scrollTop:$('.main_open').offset().top}, 500); },380); ``` 心地よい動きにするためには、 ・`slide`の速度 ・`animate`のスクロール速度 ・`setTimeout`のウェイト時間 のバランスを調整する必要もあるかと思います。