例えばヘッダーを固定させた場合など、ページ内リンクを普通に作ると移動先の見出しなどが、ヘッダーの下に隠れてしまう事があります。
こちらのデモのように、メニューをクリックするとそのセクションに移動しますが、上の方がヘッダーの下に隠れてしまいます。
See the Pen
ページ内リンク（ポジション修正しない場合） by junpei (@junpei-sugiyama)
on CodePen.
そういう場合、『ページ内リンクの遷移先をヘッダーと重ならないようにしたい』といったケースが出てくると思います。
今回は、その方法について解説したいと思います。
（有料になっていたらすいません🙇♂️）
固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法
まずは、今回の完成形を見てみます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
これはページ内リンクのジャンプ先の位置を調整するだけでなく、コンテンツがヘッダーの下に隠れないように、ヘッダーの高さ分コンテンツを下げています。
ヘッダーの高さを取得して高さ分コンテンツを下げる方法については以下の記事を参照下さい。
-
【jQuery】ヘッダーの高さを取得して高さ分コンテンツを下げる方法
続きを見る
ちなみに、コンテンツを下げないとこのようになります。
See the Pen
ヘッダーの高さ分コンテンツを下げない by junpei (@junpei-sugiyama)
on CodePen.
一番上のセクションであるABOUTの一番上が、ヘッダーの下に隠れてしまっています。
また、ヘッダーを固定しない場合のページ内リンクはこちらです。
See the Pen
ページ内リンク by junpei (@junpei-sugiyama)
on CodePen.
どちらもsectionの見出しの上に移動するようにしています。
このヘッダーを固定しないページ内リンクについては、以下の記事を参照下さい。
-
【コピペOK！】jQueryを使ったスムーススクロールで移動するページ内リンクの作り方
続きを見る
コード解説
それでは、本題である今回作るページ内リンクのHTMLを見てみます。
<header class="header js-header">
<nav>
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#works">WORKS</a></li>
<li><a href="#gallery">GALLERY</a></li>
<li><a href="#service">SERVICE</a></li>
</ul>
</nav>
</header>
<main>
<section id="about" class="section01">ABOUT</section>
<section id="works" class="section02">WORKS</section>
<section id="gallery" class="section03">GALLERY</section>
<section id="service" class="section04">SERVICE</section>
</main>特に変わったところはなく、通常のページ内リンクの時と同じです。
CSSも特に変わったところはありません。
なので、HTMLとCSSに関してはヘッダーの高さを取得して高さ分コンテンツを下げる方法と同じですが、jQueryにちょっと手を加えます。
jQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。
jQueryを使ったことがない人はこちらの記事を参照下さい。
-
【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説
続きを見る
// ヘッダーの高さ分だけコンテンツを下げる
$(function () {
const height = $(".js-header").height();
$("main").css("margin-top", height);
});
// ページ内スクロール
$(function () {
// ヘッダーの高さ取得
const headerHeight = $(".js-header").height();
$('a[href^="#"]').click(function () {
const speed = 600;
let href = $(this).attr("href");
let target = $(href == "#" || href == "" ? "html" : href);
// ヘッダーの高さ分下げる
let position = target.offset().top - headerHeight;
$("body,html").animate({ scrollTop: position }, speed, "swing");
return false;
});
});最初はヘッダーの高さ分だけコンテンツを下げるコードで、ページ内スクロールの方はjQueryを使ったスムーススクロールで移動するページ内リンクの作り方とほぼ同じですが、以下の2点が追記されています。
// ヘッダーの高さ取得
const headerHeight = $(".js-header").height();
// ヘッダーの高さ分下げる
let position = target.offset().top - headerHeight;ヘッダーの高さ取得に関しては『ヘッダーの高さ分だけコンテンツを下げる』と同じです。
そしてその高さ分『headerHeight』をマイナスして位置を下げている形になります。
上記コードは『ヘッダーの高さ分だけコンテンツを下げる』と『ページ内リンクのジャンプ先の位置を調整&スムーススクロール』を分けて書きましたが、以下のようにまとめても大丈夫です。
$(function () {
// ヘッダーの高さを取得
const height = $(".js-header").height();
// ヘッダーの高さ分コンテンツを下げる
$("main").css("margin-top", height);
// ページ内スクロール
$('a[href^="#"]').click(function () {
const speed = 600;
let href = $(this).attr("href");
let target = $(href == "#" || href == "" ? "html" : href);
// ヘッダーの高さ分下げる
let position = target.offset().top - height;
$("body,html").animate({ scrollTop: position }, speed, "swing");
return false;
});
});
CSSのscroll-padding-topだけでも可能
今回のjQueryを使う方法は、ヘッダーの高さが可変でもOKというメリットがあります。
しかし、ヘッダーの高さが固定であれば、jQueryは不要で以下のCSSだけでもOKです。
html {
scroll-padding-top: 50px; /* ヘッダーの高さ */
}これはヘッダーの高さが50pxの場合です。
詳しくは、以下の記事を参照下さい（と言っても、上記のコードを書くだけですが）
-
CSSだけで固定ヘッダー時のページ内スクロール位置がズレないようにする方法【scroll-padding-top使用】
続きを見る
まとめ
それでは最後にもう一度完成形をみてみます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
以上になります。
-
【コピペOK！】jQueryを使ったスムーススクロールで移動するページ内リンクの作り方
続きを見る
-
【jQuery】ヘッダーの高さを取得して高さ分コンテンツを下げる方法
続きを見る
