ページ内リンク位置が固定ヘッダーで隠れるのを防ぐ（CSS・Javascript）

ページ内リンクはWEBサイトでよく見かけますが、最近は固定フッターが画面上部にくっついているので、そこにリンク先が隠れる場合があります。

リンクを押しても対象位置ジャンプしたのかユーザーがわかりにくいため、改善が必要です。

cssならscroll-paddingを:rootに設定したりjavascriptを使う事で、画面上部から任意の数値分だけ下にずらす事ができるので、対象の見出しなどが隠れずに済みます。

ページ内リンク位置が固定ヘッダーで隠れる

今回はページ内リンクで飛んだ箇所に固定ヘッダーが重なる事で、その対象が見えなくなる事を解消する方法です。

ページ内リンクは、id属性を付けたところを目掛けて飛びますよね。

リンク元から「#aaa」などの形で指定する事で、その箇所にジャンプする訳です。

これにより、ページ内の任意の位置を表示させる事ができます。

ページ内リンクの掛け方

リンク元に#名称をつける <a href="#start">リンクテキスト</a> リンク先に同じ名称のid属性をつける <h3 id="start">見出しテキスト</h3>

ジャンプする事で「リンク先となった要素が常に画面の一番上に来る」のが仕様ですね。

これはそのページ内であっても、別ページのリンク箇所でも同様です。

リンク先の要素が見えない

しかし最近のWEBサイトでは、画面上部に固定ヘッダーメニューの帯が常に引っ付いてきます。

この固定ヘッダーが上に重なる事で、リンク先となった部分（例えば見出しや画像など）が隠れてしまう訳です。

リンク先が「見出し」だとその見出し自体が隠れているため、正常に到達したのかユーザーが不安になる訳です。

ジャンプ位置をずらす

これを解消するためには、固定ヘッダーの下部分にリンク先が来る様にジャンプ位置を調整する事です。

本記事では、固定ヘッダー分だけページリンクの到達位置をずらす方法についてご紹介します。

CSSだけでも十分いけますが、javascriptの方も紹介します。

CSSのみで実現する場合

CSSで調整をする場合は以下の様なスタイルを設定しましょう。

固定数値を入れるパターン

CSS

:root{ scroll-padding: 100px; scroll-behavior: smooth; }

CSSの解説

:rootに設定すると、WEBサイト全体にその効果が及びます。

scroll-padding:プロパティは、画面スクロールする際の上限位置を決定するものです。

通常は「0」なので、画面上部枠ピッタリまでリンク先要素が移動（スクロール）します。

別途数値を入れる事で、その分だけスクロール終了位置が下に移動する訳です。

この数値は、固定ヘッダーの高さを含んだ適切な余白値を入れる事になりますね。

変数を入れるパターン

以下は直接数値を設定するのではなく、変数--header:に数値を入れて、それを使い回しできる様にしたものです。

CSS

:root{ --header: 100px; scroll-padding: var(--header); }

--headerを随所で使いつつ、いざ一括変更となった場合も簡単に対応ができますね。

管理がしやすくなるのが変数形式のメリットです。

実例（ページ内リンク）

通常は上記の【リンク】を押すと、上の1行が画面の一番上に引っ付くまで移動します。

ところがcssで100px下に調整しているので、画面枠から100px下に落ちた位置までしか移動しないのがわかります。

Javascriptで実現する場合

次はJavascriptを使った方法を紹介します。

以下のコードをjsファイル書く事になりますが、別途Jqueryの読込が必要です。

javascriptコード（ページ内リンク向け）

$(function () { var headerHight = 000; //ヘッダの高さ $('a[href^=#]').click(function(){ var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top-headerHight; $("html, body").animate({scrollTop:position}, 550, "swing"); return false; }); });

javascriptコード（ページ外リンク向け）

$(window).on('load', function() { var headerHight = 000; //ヘッダの高さ if(document.URL.match("#")) { var str = location.href ; var cut_str = "#"; var index = str.indexOf(cut_str); var href = str.slice(index); var target = href; var position = $(target).offset().top - headerHight; $("html, body").scrollTop(position); return false; } });

jqueryの読込例

<script src="js/jquery-3.6.4.min.js"></script>

jqueryの読込が無いと正常に動きませんので注意しましょう。

Jsコードの解説

ver headerHeight = 000;の欄に固定ヘッダーを含んだ高さを設定します。

画面上端から、headerHeightで設定した数値分だけ下に下がった位置（position）に移動させる命令です。

このサンプルを両方入れておけば同じページ内のリンク、および別ページ上のページ内リンクにも有効です。

余白をつけて位置をずらす方法

よく他の方法として、アンカーが付いた見出しに別のclassを付けて、その属性に余白を設けるやり方もあります。

リンク

.anchor { padding-top: 100px; margin-top: -100px; }

固定ヘッダーの高さ分をpadding-topで設定し、さらにmargin-topでマイナスマージンを固定ヘッダー分だけ入れた形です。

これでページ内リンクのジャンプ先を少し上にずらす事ができる訳です。

同一ページ内の複数のページ内リンクがある場合

上記の方法でも問題なく稼働すると思います。

しかし同一ページに複数のページ内リンク先があると、その場所ごとに別々のclass属性をつける必要が出てきます。

全て同じclass属性だと、最初についた属性の位置で止まってしまうためです。

それだけCSSに各コードが増える事になります。

ケースによってはあまり得策な方法とは言えないでしょう。

一押し人気コーナー紹介