少し長いですが、jQueryについて知識のある方、よろしくお願いします。
現在、個人で作成したPCサイトを、スマホ・タブレットにも対応させるべく、HTML・CSSの書き換え、=レスポンシブ対応を行なっております。
複数のページで、PC閲覧を前提としたタブを使用しておりました。
横方向のタブだったり縦方向のタブだったりと、タブの形式もいろいろです。
これらを一括でスマホ等に対応させる場合には、以下のようなjQueryの設置が解決の一例である事を知りました。
『タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」』
jQueryの設置は出来るので、ひとまずこれで『デザイン上は』自分のやりたい事が実現します。
しかし、アクセシビリティー上の問題が起こってしまい、ここでつまづいている状況です。
タブの中身が端末の表示領域よりもずっと長いため、他の項目をタップした時に、中身の最上部が画面の遙か上に行ってしまい、わざわざ上までスクロールして戻らなければいけません。
このままでは不便です。そこで、上記掲載先のjQueryを基本ベースとした上で『タップした箇所が画面の一番上に来る』ように機能追加したいと思っております。
具体的には、768pxをブレイクポイントに設定しているので、
- 769px以上の時はタブ表示、他のタブを選択しても画面は移動しない。
- 768px以下の時はアコーディオン表示、『他の項目をタップした時に、その箇所が画面の一番上に来る』。
という動作にしたいと思っております。
jQueryの一部書き換え・追加で可能なのではないかと考えておりますが、自分にはjQueryの知識がなく、検索しても解決の手立てや代替案も見つからず、打つ手を失っている状況です。
素人が作っている個人サイトに過ぎませんが、何卒お力添えいただきますよう、よろしくお願いします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。