タブを画面サイズによってアコーディオンにするjQueryについて（タブの中身が長い場合の対応）

Question

少し長いですが、jQueryについて知識のある方、よろしくお願いします。
現在、個人で作成したPCサイトを、スマホ・タブレットにも対応させるべく、HTML・CSSの書き換え、＝レスポンシブ対応を行なっております。

複数のページで、PC閲覧を前提としたタブを使用しておりました。
横方向のタブだったり縦方向のタブだったりと、タブの形式もいろいろです。
これらを一括でスマホ等に対応させる場合には、以下のようなjQueryの設置が解決の一例である事を知りました。

『タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」』

jQueryの設置は出来るので、ひとまずこれで『デザイン上は』自分のやりたい事が実現します。
しかし、アクセシビリティー上の問題が起こってしまい、ここでつまづいている状況です。

タブの中身が端末の表示領域よりもずっと長いため、他の項目をタップした時に、中身の最上部が画面の遙か上に行ってしまい、わざわざ上までスクロールして戻らなければいけません。

このままでは不便です。そこで、上記掲載先のjQueryを基本ベースとした上で『タップした箇所が画面の一番上に来る』ように機能追加したいと思っております。

具体的には、768pxをブレイクポイントに設定しているので、

• 769px以上の時はタブ表示、他のタブを選択しても画面は移動しない。
• 768px以下の時はアコーディオン表示、『他の項目をタップした時に、その箇所が画面の一番上に来る』。

という動作にしたいと思っております。

jQueryの一部書き換え・追加で可能なのではないかと考えておりますが、自分にはjQueryの知識がなく、検索しても解決の手立てや代替案も見つからず、打つ手を失っている状況です。
素人が作っている個人サイトに過ぎませんが、何卒お力添えいただきますよう、よろしくお願いします。

Answer 1

activate メソッドが、引数2個でtab選択完了時呼び出されます。
デフォルトは何もしない実装なので、初期化オプション指定時にコールバックを指定し、その中で
scrollIntoView なり、$.animate するなりしてコンテンツの先頭にスクロールさせれば良いかと。
第一引数に、タブオブジェクトで、findclass が resp-vtabs なら縦タブ表示中、resp-easy-accordion ならアコーディオンです。どっちであるかは関係なくて、コンテンツの先頭が画面上部にポイントされればいいのだから、相対スクロールさせればOK でづね。

Answer 2

    $(document).ready(function() {
     //の下にこんなのを入れてﾌﾞﾗｳｻﾞﾊﾞｯｸで戻るとか？どうでしょうか
     $("#parentVerticalTab,#parentHorizontalTab,#ChildVerticalTab_1").click(function(){
      location.href="#"+$(this).attr("id");
     });
     //もしくは文章中に<a href="#ﾀﾌﾞのID">戻</a>とか所々に入れるとか;

Answer 3

タブの中身が端末の表示領域よりもずっと長いため、他の項目をタップした時に、中身の最上部が画面の遙か上に行ってしまい、わざわざ上までスクロールして戻らなければいけません。

ページ全体がタブのボタンで埋まってしまうということですよね。
タブでなくドロワーなどを検討してみてはどうでしょうか？

直接の回答でなくてすみません。

Comments

[rossi46hiro]

デモページを見た感じ、アコーディオンの一つを開くと他が閉まる仕様なので、コンテンツが長いと閉じたときにスクロールが置き去りにされるってことかと。
これはこのプラグインがクソ仕様なだけなので、他のプラグインを探した方が良いんじゃないですかね？

[退会済みユーザー]

ありがとうございます。そういう意味ですね。

他のプラグインを探した限りでも、やはり置き去りになってしまうものばかりでしたし、タブの縦方向と横方向の切り替えに対応しているものがありませんでした。
そして、アコーディオンの一つを開くと他が閉まる仕様にしたいので、開きっぱなしになるものは選択肢に含まれません。

唯一スクロールが置き去りにならないプラグインがありましたが、これも同様にタブの縦横切り替えに対応していませんでした

http://stackstock.net/archives/2040/
（そもそも現在アクセスしても、デモとダウンロードがいずれも『ページが見つかりません』となってしまいアクセスできないようです）

スクロールが置き去りにさえならなければ、先に添付した先のプラグインが一番自分の望んでいる挙動に近いのですが。。

[rossi46hiro]

なるほど、他が閉まる仕様のほうがいいのですね。
ちょっと貼っていただいたURLが見られないですが、閉じるコンテンツの高さを取得し、その分マイナススクロールさせればお望みの挙動になるんじゃないかと。
クリックしたタブより後のコンテンツが閉じるときはスクロールしない、コンテンツが閉じるスピードとスクローススピードなど、少し注意する点はありますが、そんなに複雑ではないコードで実現できそうです。