ページ内リンクの上部調整方法

html関連 css関連
2023年8月8日

同一ページ内でリンクを使って移動する場合、ページトップ部分に固定要素があったりすると隠れてしまうことありますよね。そこで、移動する位置の上部余白を調整したいなと思い、色々やってみたが確実だったのが以下の方法。
ちょっとスマートな感じではないが、ページ上部にfixedのnavがあったりした場合は仕方ないかも。
飛ばしたい部分に以下を入れる。

1
<span id="link-01" class="link-space"></span>

cssは以下を

1
2
3
4
5
span.link-space {
  position: relative;
  top: -150px;//ここで高さを調整
  display: block;
}

なかなかうまく機能しなかったりしたのだが、調べてみてよく出てきたのが以下の方法なので、fixedがない場合は有効かも知れない。

1
2
3
4
//アンカーリンクの余白調整htmlかbodyに
html {
scroll-padding-top: 100px;
}

この方法もだめだったが、他の場合は有効なのかも

1
2
3
4
5
a.anchor {
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
    <a href="#anc1">id=anc1に移動するページ内リンク</a>
</div>
...
...
  
<div>
    <!-- ページ内リンクの移動先 -->
    <a id="anc1" class="anchor"></a>
    <h1>移動先のコンテンツ</h1>
    <p>移動先のコンテンツ</p>
    <p>移動先のコンテンツ</p>
</div>