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