← カテゴリ一覧に戻る

ページ内ジャンプ

a href=#id

同じページ内の特定の要素へジャンプするアンカーリンク。href="#id" で対象要素のid を指定する。

デモ：ページ内ジャンプ

以下のリンクをクリックすると、対応するセクションへジャンプします。

セクション A へセクション B へセクション C へ

セクション A

これはセクション A の内容です。id="section-a" が付いています。 リンクの href="#section-a" と対応しています。

セクション B

これはセクション B の内容です。id="section-b" が付いています。 アンカーリンクはページ内ナビゲーションや目次に広く使われます。

セクション C

これはセクション C の内容です。id="section-c" が付いています。 URL の末尾に #section-c が付くことで直リンクも可能です。

基本的なコード例

<!-- ジャンプ先リンク -->
<a href="#section-a">セクション A へ</a>
<a href="#section-b">セクション B へ</a>

<!-- ジャンプ先要素 (id を付ける) -->
<section id="section-a">
  <h2>セクション A</h2>
  <p>内容...</p>
</section>

<section id="section-b">
  <h2>セクション B</h2>
  <p>内容...</p>
</section>

CSSscroll-behavior: smooth

デフォルトでは、アンカーリンクをクリックするとターゲット位置へ即時ジャンプします。scroll-behavior: smooth をhtml 要素に指定すると、 スムーズスクロールになります。

/* グローバルにスムーズスクロールを有効化 */
html {
  scroll-behavior: smooth;
}

/* 特定のコンテナのみに適用する場合 */
.scroll-container {
  scroll-behavior: smooth;
  overflow-y: auto;
  height: 400px;
}

ただし、prefers-reduced-motion メディアクエリを尊重し、 アニメーション軽減設定のユーザーにはスクロールアニメーションを無効にするのが望ましいです。

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

CSS:target 疑似クラス

:target 疑似クラスは、 現在の URL のフラグメント (#id) と一致する要素にマッチします。 ジャンプ先のセクションをハイライトするのに便利です。

/* ターゲットになったセクションを強調 */
section:target {
  background-color: #fef9c3;
  border-left: 4px solid #eab308;
  padding-left: 1rem;
  animation: highlight 2s ease-out;
}

@keyframes highlight {
  from { background-color: #fde68a; }
  to   { background-color: #fef9c3; }
}

/* ターゲットになった見出しだけを強調する場合 */
h2:target {
  color: #1d4ed8;
  text-decoration: underline;
}

上のデモでセクション A/B/C をクリックすると URL が変わります。:target を使うと、 その状態でページを再読込しても対象セクションがスタイル適用されたままになります。

Tipsscroll-margin-top — 固定ヘッダーのオフセット

固定ヘッダー (position: sticky / fixed) がある場合、 アンカーリンクでジャンプするとターゲット要素がヘッダーに隠れてしまうことがあります。scroll-margin-top でスクロール位置にオフセットを追加できます。

/* ヘッダーの高さ分だけスクロール位置をずらす */
section[id] {
  scroll-margin-top: 80px; /* 固定ヘッダーの高さに合わせる */
}

/* CSS カスタムプロパティで管理するとメンテしやすい */
:root {
  --header-height: 64px;
}

[id] {
  scroll-margin-top: var(--header-height);
}

scroll-margin-top はモダンブラウザで広くサポートされています。 対応する scroll-padding-top を html に指定する方法もあります。

/* scroll-padding-top を html に指定する方法 */
html {
  scroll-padding-top: 80px;
}

TipsscrollIntoView() — JavaScript での代替

JavaScript の Element.scrollIntoView() を使うと、 プログラムから要素へのスクロールを制御できます。 アンカーリンクでは実現しにくい細かい制御（オフセット調整・スクロール後のコールバックなど）に使います。

// 基本的な使い方
const target = document.getElementById('section-a');
target.scrollIntoView({ behavior: 'smooth', block: 'start' });

// block オプション
// 'start'   : 要素の上端をビューポート上端に合わせる
// 'center'  : 要素をビューポート中央に合わせる
// 'end'     : 要素の下端をビューポート下端に合わせる
// 'nearest' : 最小スクロール量で表示

// ヘッダーオフセットを考慮する場合
function scrollToWithOffset(id, offset = 80) {
  const el = document.getElementById(id);
  if (!el) return;
  const top = el.getBoundingClientRect().top + window.scrollY - offset;
  window.scrollTo({ top, behavior: 'smooth' });
}

// SPA での使用例 (React)
function handleNavClick(e, id) {
  e.preventDefault();          // デフォルトのアンカー挙動を止める
  scrollToWithOffset(id, 64);
  history.pushState(null, '', '#' + id); // URL を更新
}

CSS の scroll-margin-top と組み合わせることで、 通常のアンカーリンクと JS スクロール両方に対応できます。

まとめ

機能方法用途
ページ内ジャンプhref="#id"目次・セクションナビゲーション
スムーズスクロールscroll-behavior: smoothUX の向上
ターゲット強調:target現在のセクションを視覚的に示す
固定ヘッダー対応scroll-margin-topヘッダーに隠れる問題を解消
JS スクロール制御scrollIntoView()SPA・複雑なオフセット計算

🤖 AIプロンプトテンプレート

以下の要件を満たす、`<a href>` を使ったアンカーリンクのHTML・CSSサンプルを作成してください。

- ページ内の特定セクションへジャンプする `href="#section-id"` の使い方を示すこと
- スムーズスクロールを `scroll-behavior: smooth` または `scrollIntoView()` で実現すること
- ナビゲーションリンク一覧と、対応するセクションの構造を含めること
- アクセシビリティのため、リンクテキストは具体的な内容を示すこと（「こちら」はNG）
- 「トップへ戻る」リンクの実装例も含めること

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo