ページ内ジャンプをさせると停止位置に止まるソースを書いても、上部に空白が出来てしまいます。

ページ内ジャンプをさせるとページ上部のMENU画面に、リンク先の文字が隠れてしまい表示不良を起こす
ハックを使って一部ページは適用出来ていますが一部ページで動作しません。（同一ドメイン内）

下記がハックのソースです。

ページ内リンクで使う標準HTML CODE
ジャンプ先：

<a id="name"></a>
リンク箇所：

<a href="#name"></a>
ジャンプ先の文字が隠れる場合のCSS CODEとHTML CODE
ページ上部に固定されたメニューがある場合、ジャンプ先の文字が、メニューに隠れて表示されない現象が起きる場合があります。
この場合、ジャンプ先の上部に隙間を作る必要があります。その場合の手順は以下の通りです。

1.CSSコードを追記
a.anchor{    display: block;    padding-top: 70px;    margin-top: -70px;}
2.ジャンプ先HTMLコードを記入
<a id="name" class="anchor"></a>
3.リンク箇所HTMLコードを記入
<a href="#name"></a>

参考サイト
ページ内リンクで飛んだ先の上部に隙間を作る時に使うCSSとHTMLコード

うまくいったページの例
印材一覧のボタンを押すとぴったり止まります。

しかし、

うまくいかない例
 うまくいかない例
 うまくいかない例
 うまくいかない例
 うまくいかない例
このページでは上に空白が出来てしまっています。
こちらは、ＣＳＳをいじってますが、まだ解決しません。
どうすれば修正できますでしょうか？

Lhankor_Mhy

2021/09/10 08:50

ご提示のページを拝見しました。「ページ上部のMENU画面に、リンク先の文字が隠れてしまい」とのことですが、この「ページ上部のMENU画面」とは具体的にはどれですか？

niconic73027793

2021/09/10 09:44

これは参考サイトのタイトルをそのまま抜粋して修正し忘れてしまいました。サイト内リンクで移動したときに停止位置がずれると書くべきでした。

行動規範の内容に同意します

回答1件

ベストアンサー

「うまくいったページの例」にHTMLを合わせてはどうですか？

うまくいったページの例

html
1    <h2 class="midashi">
2        銀行印　印材一覧<a id="inzai-top" class="anchor"></a>
3    </h2>

うまくいかない例

html
1        <h2 class="midashi" id="inzai-top">
2        芯持ち黒水牛印鑑 一覧
3        </h2>

うまくいかない例

html
1        <h2 class="midashi">
2            <a id="inzai-top" class="anchor"></a>彩樺(さいか)印鑑 一覧　
3        </h2>

投稿2021/09/10 09:02

Lhankor_Mhy

総合スコア36981

niconic73027793

2021/09/10 09:37

それらを変えてもうまくいきませんでした。下が膨らむ件に関しては、 [うまくいかない例](https://www.e-nisino.com/kojin_kuro/) [うまくいかない例](https://www.e-nisino.com/kojin_titan/) [うまくいかない例](https://www.e-nisino.com/kojin_goldtitan/) anchor-bottom{ display: block; padding-top: 70px; margin-top: -70px; margin-bottom:-25px;} のクラスを指定したらうまくいきました。