ヘッダー固定時にページ内リンクのずれを考慮してスムーズスクロールを実装する方法【jQuery】

Programming Web

この記事について
Web制作者

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ライブで気をつけるべきチャットへのコメントマナーまとめ

おすすめ記事 お名前.comのドメインプロテクションは必要か【採算がとれるか】