ヘッダー固定時にページ内リンクのずれを考慮してスムーズスクロールを実装する方法【jQuery】
Web制作者
「Webサイトにページ内リンクを実装したら、固定ヘッダーに被ってしまって気持ち悪い・・・。どうにか被らないようにしたいけどどうすればいいんだろう？」
こういった悩みにお答えします。
本記事の内容
- 固定ヘッダーを考慮したページ内リンク（スムーズスクロール）の実装方法
こんにちは、mine（@mineblog7）です。
ブログ歴は4年ほどになります。現在はmineblogを一人で運営しています。
Webサイトを見ていると、よくサイト内ジャンプでページ内リンク（スムーズスクロール）が実装されています。
普通にページ内リンクを設定すると、ヘッダー固定時に困ったことが起こります。
それは、固定ヘッダーとコンテンツ（テキストや画像など）が被ってしまう問題です。
この記事では、jQueryを使用したヘッダー固定時のずれを考慮したスムーズスクロールを実装する方法をご紹介します。
ページ内リンクの実装パターン
ページ内リンクを実装するパターンについて少し説明します。
- 普通にページ内リンクを設定する場合
- ページ内リンク（スムーズスクロール）を実装する場合
普通にページ内リンクを設定する場合
普通に上に固定ヘッダーを用意します。ページ内リンク時にテキストがヘッダーと被ってしまい、非常にスマートではないです。というか、ユーザにっとて不便ですね。
ページ内リンク（スムーズスクロール）を実装する場合
テキストとヘッダーが被らずにスムーズスクロールを実現します。
この記事ではこちらの実装方法を詳しく紹介します。
固定ヘッダーを考慮したスムーズスクロールの実装方法
ここから具体的な実装方法を詳しく紹介します。
HTML
<div class="site-header">ヘッダーエリア</div>
<!-- コンテンツ（省略） -->
<a href="#block1">コンテンツ1</a>
<!-- コンテンツ（省略） -->
<div id="block1">
<!-- コンテンツ（省略） -->
</div>特に詳しくは書きませんが、基本のHTMLは下記リストの通りです。
【参考】HTMLの構成
- 固定ヘッダー（
site-headerクラス） - ページ内リンク（
<a>タグ） - ジャンプ先要素（リンクと対応したid名）
CSS
.site-header {
width: 100%;
position: fixed;
background: #333;
color: #fff;
padding: 25px 0;
text-align: center;
top: 0;
left: 0;
}CSSに関しても特に詳細はありません。
ただし、今回の記事ではヘッダー固定が前提ということを踏まえて、ヘッダー要素に対してposition: fixed;を設定します。
jQuery
<head>内に記述
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>jQueryを<head>内に記述します。
// スムーズスクロール
$("a[href^='#']").click(function(){
// ヘッダー分のずれを考慮
var diff = $(".site-header").innerHeight();
$("html,body").animate({
scrollTop: $($(this).attr("href")).offset().top - diff }, 'slow','swing');
return false;
});ページ内リンクをクリック時に、スムーズスクロールを実行します。
.animateメソッドにscrollTopプロパティを指定してスムーズスクロールを実現します。
scrollTopプロパティに移動させたい位置を指定します。普通にスムーズスクロールするだけなら、$($(this).attr("href")).offset().topだけで良いですが、今回はコンテンツの重複を回避するために、固定ヘッダー分の高さ（$(".site-header").innerHeight();）ををスクロール位置から差し引いてあげます。
あとは変化のスピードとイージング処理の設定をすればOKです（ここでは説明は省く）。よくわからなくてもソースコードコピーで、クラス名とかを変えて使っても大丈夫です。
まとめ
ページ内リンクで飛び先が固定ヘッダーと被ってしまっていて気持ち悪いな～と思っている方がいたら、数行のjQueryで解決できるのでぜひ実装してみてください。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 YouTubeライブで気をつけるべきチャットへのコメントマナーまとめ