JavaScript、HTML、CSSで解説：固定ヘッダー時のアンカーリンク調整
2024-04-02
固定ヘッダー時のアンカーリンク調整：JavaScript、HTML、CSSによる解説
Webページに固定ヘッダーを実装すると、ページスクロール時にヘッダーが画面上部に固定され、コンテンツが下にずれます。しかし、ヘッダーの高さ分だけコンテンツがずれるため、アンカーリンクをクリックした際に意図した位置に移動できない問題が発生します。
この問題を解決するために、アンカーリンクの位置をヘッダーの高さ分だけ調整する必要があります。この調整を「オフセット」と呼びます。
オフセット方法はいくつかありますが、ここではJavaScript、HTML、CSSを用いた3つの方法を紹介します。
方法1：JavaScriptによるオフセット
JavaScriptを使用して、アンカーリンクをクリックした際にスクロール位置を調整する方法です。
コード例
<a href="#target">リンク</a>
const headerHeight = document.querySelector('.header').offsetHeight;
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', event => {
event.preventDefault();
const target = document.getElementById(anchor.getAttribute('href').substring(1));
const scrollTop = target.offsetTop - headerHeight;
window.scrollTo({
top: scrollTop,
behavior: 'smooth'
});
});
});
コード解説
headerHeight変数にヘッダーの高さ（ピクセル単位）を代入します。querySelectorAllメソッドを使用して、ページ内のすべてのアンカーリンクを取得します。forEachループを使用して、取得したアンカーリンクそれぞれに対して以下の処理を実行します。addEventListenerメソッドを使用して、アンカーリンクのクリックイベントにリスナー関数を登録します。
方法2：HTML属性によるオフセット
HTMLの href 属性に # 記号とオフセット値を指定する方法です。
<a href="#target-100">リンク</a>
href属性に#記号とターゲット要素のID、そしてオフセット値（ピクセル単位）をカンマ区切りで指定します。
方法3：CSS pseudo-classによるオフセット
CSSの :target 疑似クラスを使用して、アンカーリンクがクリックされた際にターゲット要素の位置を調整する方法です。
<a href="#target">リンク</a>
<div id="target"></div>
#target {
margin-top: -100px;
}
#target:target {
margin-top: 0;
}
- ターゲット要素に
margin-topプロパティを使用して、ヘッダーの高さ分だけ上マージンを設定します。 :target疑似クラスでは、margin-topプロパティを0に設定して、上マージンを解除します。
注意事項
- 上記の方法は、いずれもヘッダーの高さが固定されている場合にのみ有効です。
- ヘッダーの高さが動的に変化する場合は、JavaScriptを使用してスクロールイベント時にアンカーリンクの位置を調整する必要があります。
補足
上記以外にも、JavaScriptライブラリを使用してオフセットを行う方法もあります。
方法1：JavaScriptによるオフセット
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>オフセットサンプル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<h1>サイトタイトル</h1>
</header>
<main>
<section id="section-1">
<h2>セクション1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#section-2">セクション2へ</a>
</section>
<section id="section-2">
<h2>セクション2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #ccc;
}
main {
margin-top: 100px;
}
section {
padding: 20px;
}
const headerHeight = document.querySelector('.header').offsetHeight;
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', event => {
event.preventDefault();
const target = document.getElementById(anchor.getAttribute('href').substring(1));
const scrollTop = target.offsetTop - headerHeight;
window.scrollTo({
top: scrollTop,
behavior: 'smooth'
});
});
});
方法2：HTML属性によるオフセット
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>オフセットサンプル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<h1>サイトタイトル</h1>
</header>
<main>
<section id="section-1">
<h2>セクション1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#section-2-100">セクション2へ</a>
</section>
<section id="section-2">
<h2>セクション2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</main>
</body>
</html>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #ccc;
}
main {
margin-top: 100px;
}
section {
padding: 20px;
}
方法3：CSS pseudo-classによるオフセット
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>オフセットサンプル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<h1>サイトタイトル</h1>
</header>
<main>
<section id="section-1">
<h2>セクション1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#section-2">セクション2へ</a>
</section>
<section id="section-2">
<h2>セクション2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</main>
</body>
</html>
.header {
position: fixed;
top:
固定ヘッダー時のアンカーリンク調整：その他の方法
CSSの position: sticky プロパティを使用して、ヘッダーをスクロール時に画面上部に固定する方法です。
.header {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #ccc;
}
position: stickyプロパティを設定することで、ヘッダーが画面上部に固定されます。
position: stickyプロパティは、一部のブラウザでは対応していない場合があります。
方法5：JavaScriptライブラリ
Smooth ScrollなどのJavaScriptライブラリを使用して、アンカーリンクのスクロール動作をスムーズに調整する方法です。
方法6：CSS Grid
CSS Gridレイアウトを使用して、ヘッダーとコンテンツをレイアウトする方法です。
方法の選択
上記の方法の中から、プロジェクトの要件やブラウザの対応状況などを考慮して最適な方法を選択してください。
- 上記の方法を組み合わせることで、より柔軟な調整を行うことも可能です。
固定ヘッダー時のアンカーリンク調整には、さまざまな方法があります。それぞれの方法のメリットとデメリットを理解し、プロジェクトに合った方法を選択してください。
javascript html css
