別ページへのリンク(アンカー)をページ上部にジャンプさせる

Question

現在、目次ページにある商品を選ぶと、別ページの価格表の該当商品のところに
ジャンプするようにアンカーを使ってリンクしています。

価格表ページの下の方に載っている商品に関しては、
ジャンプした先のページが一番上までスクロールしない状態で表示されてしまいます。
おそらく価格表のテーブル自体がページに収まりきっていることが原因だと思うのですが、
開く画面の大きさにもよると思うので、何か良い方法は無いでしょうか？

テーブルがもっと長ければ上にスクロールされると思いますが、空白行を増やすというのも
違うと思いますし……。
宜しくお願い致します。

---

■ 目次

<li><p><a href="/pricelist/brand-a.php#a1">A1</a></p></li>
<li><p><a href="/pricelist/brand-a.php#a2">A2</a></p></li>

■ 価格表

<table>
<tr>
<td><a class="anchor" name="a1" id="a1"></a>A1</td>
</tr>
<tr>
<td><a class="anchor" name="a2" id="a2"></a>A2</td>
</tr>
</table>

Comments

[m.ts10806]

ご自身が書かれたソースコードを追記してください。https://teratail.com/help/question-tips#questionTips3-5

[koro703]

ご指摘頂きまして、ありがとうございます。

[yoshinavi]

「papinianus」さんの回答のとおり、デバイス画面を物理的に縮める事が出来ないので、フッターを工夫するか、「目立たせる」のが良いかと思います。いずれにしても、ユーザーの使い勝手を妨げる方法は避けるべきです。

[koro703]

yoshinaviさん、ありがとうございます！目立たせる方法がユーザーさんにとって絶対良いと思いますので、その方法を調べてみたいと思います。ありがとうございます！

Answer 1

テーブルを増やすのは変ですが、ブラウザの挙動として、何らかの余白がなければ、上にもってくることは難しいかと思います。

別の観点で、ユーザに見やすく、という最終目的からすると、背景色とか何らかのマークで目立たせるという解決もあるのかなと思いました。

Comments

[koro703]

ご返信頂きまして、ありがとうございます。

ユーザーの方に分かりやすくしたかったので、
このような方法が出来るのであればそうしたいです！
リンク先にジャンプした先についてこういう風に出来る方法を
「リンク先　背景　色」調べてみましたがまだ不明なので、
もう少し調べてみたいと思います。

[papinianus]

https://oshiete.goo.ne.jp/qa/4082691.html
ちょっといいのみつかりませんでした。