別ページの特定の場所に飛べるようにリンクを付けたい

Question

前提

別のページの特定の場所に飛べるリンク設定

実現したいこと

・キーワードをクリックしたら別ページの特定の場所に飛ぶ
・特定の場所に飛んだ時その場所を画面の見やすい位置に指定したい

発生している問題・エラーメッセージ

・指定した場所に飛べるけど画面の上に行き過ぎて見ずらい

該当のソースコード

別ページの特定の場所
<div id="a">
<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">
<strong>
<span style="font-size:20px;">「特定の場所」</span><br />
</strong>
</span>
</div>

クリックするキーワード
<a href="http://b-yumekobo.shop-pro.jp/?mode=f3#a" target="blank">　「キーワード」　</a>

試したこと

・marginでやってみたが変化なし
・調べたが調べ方が悪かったのかヒットせず、、、

補足情報（FW/ツールのバージョンなど）

Comments

[yukomebo]

下記のURLを見てみましたが初心者なので分かりませんでした。
申し訳ないのですが、具体的な打ち方やコードを教えていただけたら幸いです。

Answer 1

最近やっとほとんどのブラウザに scroll-margin-top / scroll-padding-top が実装されたので、そのあたりを調査してみてはいかがでしょう。

【scroll-margin-top - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/scroll-margin-top

【"scroll-margin-top" | Can I use... Support tables for HTML5, CSS3, etc】
https://caniuse.com/?search=scroll-margin-top

【scroll-padding-top - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/scroll-padding-top

Answer 2

現行のメジャーブラウザはすべて、指定されたIDの要素のボーダー上部が表示領域の上部に来るような挙動を持っています。その動作を変える手段はありません。

<div id="a"> の broder-top-width padding-top で調整するか、:target 擬似クラスで何とかするのがよいでしょう。