jQueryアニメーションの全盛期は使うことが多かったアコーディオンメニュー。

アコーディオンメニューとは、
クリックした対象のコンテンツだけを表示して、それ以外は畳んでおくというUIです。

最近では徐々にサイトに設置する機会が減ってきましたが、
それでも使う機会がなくなったわけではありません。

PCメインの時代はアコーディオンメニューは非常に重宝しました。
スマホがメインの最近では、コンテンツが長くなるために、
折りたたみのアニメーションのときに、
コンテンツの頭が移動し、場合によっては画面外（上）に飛び出してしまうという問題が発生します。

↓通常のアコーディオンメニュー
DEMO

最近になって設置を避けるようになったのは、その問題のせいではないでしょうか。

今回は、アコーディオンのアニメーションのときに、
コンテンツの位置が見た目上、移動しないようにする方法を考えてみました。

↓改良したアコーディオンメニュー
DEMO

方法

今回考えた方法は、jQueryでのアニメーションのときに、
アニメーションの各ステップごとに、コンテンツ上での現在位置を確認して、
移動した分、画面をスクロールさせるというものです。

HTML

jQuery

jQueryのanimateをはじめ、slideUp、slideDown、fadeInといったアニメーション系のAPIでは、
オプションとして、アニメーションの各ステップ(フレーム)ごとに関数を実行する、stepというプロパティを設定することができます。

このオプションを利用して、各ステップごとにアコーディオンメニューのタイトルの移動距離を取得して、
その分画面をスクロールさせるようにしてみました。