JavaScriptのlocation.hashを使ったページ内リンクの実装方法

●location.hashとは？

皆さんはWebサイトを閲覧していて、URLの末尾に「#」マークが付いているのを見たことはありませんか？

これは「ハッシュ」と呼ばれ、ページ内の特定の位置にジャンプするためのアンカーリンクを表しています。

JavaScriptでは、このハッシュ部分を操作するためにlocation.hashというプロパティが用意されています。

location.hashを使うことで、ページ内リンクを動的に制御し、ユーザーエクスペリエンスを向上させることができるのです。

○location.hashの基本的な使い方

では早速、location.hashの使い方について見ていきましょう。

location.hashは、現在のURLのハッシュ部分を取得したり、設定したりするためのプロパティです。

例えば、URLが「https://example.com/#section1」の場合、location.hashの値は「#section1」になります。

これを利用して、JavaScriptからページ内の特定の位置にジャンプすることができます。

次のようなコードを実行すると、id属性が「section1」の要素の位置までスクロールします。

window.location.hash = "#section1";

○サンプルコード1：シンプルなページ内リンクの実装

それでは実際に、location.hashを使ってシンプルなページ内リンクを実装してみましょう。

HTML

<a href="#section1">セクション1へ</a>
<a href="#section2">セクション2へ</a>

<h2 id="section1">セクション1</h2>
<p>これはセクション1の内容です。</p>

<h2 id="section2">セクション2</h2>
<p>これはセクション2の内容です。</p>

このHTMLでは、<a>タグのhref属性にハッシュ付きのリンク先を指定しています。

また、リンク先となる要素には、id属性を設定しています。

このコードを実行すると、「セクション1へ」「セクション2へ」というリンクをクリックすることで、対応するセクションまでスクロールします。ページ遷移は発生せず、スムーズにページ内を移動できます。

●ページ内リンクの実装方法

これまで、location.hashの基本的な使い方と、それを使ったシンプルなページ内リンクの実装方法について見てきました。

しかし、実際のWebサイトでは、もっと複雑で多様なページ内リンクが求められることがあります。

そこで、ここからはもう少し実践的なページ内リンクの実装方法について、具体的なサンプルコードを交えて解説していきたいと思います。

みなさんのWebサイト制作のお役に立てれば幸いです。

○サンプルコード2：複数のページ内リンクを実装

Webサイトには、通常、複数のセクションやコンテンツが存在します。

そのため、ページ内リンクも複数設置することが一般的です。

では、複数のページ内リンクを効率良く実装するにはどうすればよいでしょうか。

ここでは、JavaScriptを使って動的にページ内リンクを生成する方法を紹介します。

HTML

<nav id="navigation">
  <a href="#section1">セクション1へ</a>
  <a href="#section2">セクション2へ</a>
  <a href="#section3">セクション3へ</a>
</nav>

<section id="section1">
  <h2>セクション1</h2>
  <p>これはセクション1の内容です。</p>
</section>

<section id="section2">
  <h2>セクション2</h2>
  <p>これはセクション2の内容です。</p>
</section>

<section id="section3">
  <h2>セクション3</h2>
  <p>これはセクション3の内容です。</p>
</section>

JavaScript

// ページ内リンクのクリックイベントを監視
document.getElementById("navigation").addEventListener("click", function(event) {
  if (event.target.tagName === "A") {
    event.preventDefault();
    const targetId = event.target.getAttribute("href");
    const targetElement = document.querySelector(targetId);
    if (targetElement) {
      targetElement.scrollIntoView({
        behavior: "smooth",
        block: "start"
      });
    }
  }
});

このコードでは、ナビゲーション内のリンクをクリックすると、対応するセクションまでスムーズにスクロールします。

JavaScriptでは、addEventListenerを使ってクリックイベントを監視し、scrollIntoViewメソッドでスクロール動作を実現しています。

複数のリンクを一括で制御できるので、コードがシンプルになり、メンテナンス性も向上します。

○サンプルコード3：スムーズにスクロールするページ内リンク

先ほどのサンプルコードでは、scrollIntoViewメソッドを使ってスムーズなスクロールを実現しました。

しかし、このメソッドはIE11など一部のブラウザでは対応していません。

そこで、より幅広いブラウザに対応するために、window.scrollToメソッドを使ったスクロール方法を見ていきましょう。

JavaScript

// ページ内リンクのクリックイベントを監視
document.getElementById("navigation").addEventListener("click", function(event) {
  if (event.target.tagName === "A") {
    event.preventDefault();
    const targetId = event.target.getAttribute("href");
    const targetElement = document.querySelector(targetId);
    if (targetElement) {
      const targetPosition = targetElement.getBoundingClientRect().top;
      const startPosition = window.pageYOffset;
      const distance = targetPosition - startPosition;
      const duration = 300;
      let start = null;

      window.requestAnimationFrame(step);

      function step(timestamp) {
        if (!start) start = timestamp;
        const progress = timestamp - start;
        window.scrollTo(0, easeInOutCubic(progress, startPosition, distance, duration));
        if (progress < duration) window.requestAnimationFrame(step);
      }
    }
  }
});

// イージング関数
function easeInOutCubic(t, b, c, d) {
  t /= d/2;
  if (t < 1) return c/2*t*t*t + b;
  t -= 2;
  return c/2*(t*t*t + 2) + b;
};

このコードでは、window.requestAnimationFrameを使ってアニメーションを実装し、easeInOutCubicというイージング関数でスクロールの加減速を調整しています。

これにより、より自然で滑らかなスクロールが実現できます。

古いブラウザへの対応やスクロールアニメーションのカスタマイズが必要な場合は、このような実装方法を検討してみてください。

○サンプルコード4：ナビゲーションメニューにページ内リンクを追加

Webサイトのナビゲーションメニューは、サイト内の主要なセクションへのリンクを提供する重要な要素です。

ここでは、ナビゲーションメニューにページ内リンクを組み込む方法を紹介します。

HTML

<nav>
  <ul>
    <li><a href="#home">ホーム</a></li>
    <li><a href="#about">会社概要</a></li>
    <li><a href="#services">サービス</a></li>
    <li><a href="#contact">お問い合わせ</a></li>
  </ul>
</nav>

<section id="home">
  <h2>ホーム</h2>
  <p>私たちのWebサイトへようこそ！</p>
</section>

<section id="about">
  <h2>会社概要</h2>
  <p>我が社は最高のサービスを提供します。</p>
</section>

<section id="services">
  <h2>サービス</h2>
  <p>様々なサービスをご用意しています。</p>
</section>

<section id="contact">
  <h2>お問い合わせ</h2>
  <p>お気軽にお問い合わせください。</p>
</section>

JavaScript

// ナビゲーションのリンクにページ内リンクを設定
const navLinks = document.querySelectorAll("nav ul li a");
navLinks.forEach(link => {
  const targetId = link.getAttribute("href");
  link.addEventListener("click", function(event) {
    event.preventDefault();
    const targetElement = document.querySelector(targetId);
    if (targetElement) {
      targetElement.scrollIntoView({
        behavior: "smooth",
        block: "start"
      });
    }
  });
});

このコードでは、ナビゲーションメニューのリンクに対して、JavaScriptでページ内リンクの機能を追加しています。

querySelectorAllを使ってすべてのリンクを取得し、それぞれにクリックイベントを設定しています。

こうすることで、ユーザーはナビゲーションメニューから直接目的のセクションにジャンプできるようになり、サイトの利便性が向上します。

○サンプルコード5：アコーディオンメニューにページ内リンクを追加

アコーディオンメニューは、クリックすると展開・収束するメニューで、限られたスペースに多くの情報を格納できる便利なUIパターンです。

ここでは、アコーディオンメニューにページ内リンクを組み込む方法を見ていきます。

HTML

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <a href="#section1">セクション1</a>
    </h3>
    <div class="accordion-content">
      <p>セクション1の内容です。</p>
    </div>
  </div>

  <div class="accordion-item">
    <h3 class="accordion-header">
      <a href="#section2">セクション2</a>
    </h3>
    <div class="accordion-content">
      <p>セクション2の内容です。</p>
    </div>
  </div>

  <div class="accordion-item">
    <h3 class="accordion-header">
      <a href="#section3">セクション3</a>
    </h3>
    <div class="accordion-content">
      <p>セクション3の内容です。</p>
    </div>
  </div>
</div>

<section id="section1">
  <h2>セクション1</h2>
  <p>これはセクション1です。</p>
</section>

<section id="section2">
  <h2>セクション2</h2>
  <p>これはセクション2です。</p>
</section>

<section id="section3">
  <h2>セクション3</h2>
  <p>これはセクション3です。</p>
</section>

JavaScript

// アコーディオンの動作を設定
const accordionHeaders = document.querySelectorAll(".accordion-header");
accordionHeaders.forEach(header => {
  header.addEventListener("click", function() {
    this.classList.toggle("active");
    const content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
});

// アコーディオンのリンクにページ内リンクを設定
const accordionLinks = document.querySelectorAll(".accordion-header a");
accordionLinks.forEach(link => {
  link.addEventListener("click", function(event) {
    event.preventDefault();
    const targetId = this.getAttribute("href");
    const targetElement = document.querySelector(targetId);
    if (targetElement) {
      targetElement.scrollIntoView({
        behavior: "smooth",
        block: "start"
      });
    }
  });
});

このコードでは、アコーディオンメニューの開閉動作と、ページ内リンクの機能を組み合わせています。

アコーディオンのヘッダーをクリックすると、対応するコンテンツが展開・収束します。

また、ヘッダー内のリンクをクリックすると、ページ内の目的のセクションまでスクロールします。

●よくあるエラーと対処法

ここまで、JavaScriptのlocation.hashを使ったページ内リンクの実装方法について、様々なサンプルコードを交えて解説してきました。

しかし、実際にコードを書いていると、思わぬエラーに遭遇することがあります。

そこで、ここからはページ内リンクの実装でよく発生するエラーと、その対処法について見ていきたいと思います。

初心者の方でも、つまずきやすいポイントを理解することで、スムーズにページ内リンクを実装できるようになるでしょう。

○リンク先の要素が見つからない場合の対処法

ページ内リンクを実装する際によく発生するエラーの1つが、リンク先の要素が見つからないというものです。

例えば、次のようなコードを書いたとします。

HTML

<a href="#section1">セクション1へ</a>

<!-- セクション1の要素がない -->

JavaScript

const link = document.querySelector("a");
link.addEventListener("click", function(event) {
  event.preventDefault();
  const targetId = this.getAttribute("href");
  const targetElement = document.querySelector(targetId);
  if (targetElement) {
    targetElement.scrollIntoView({
      behavior: "smooth",
      block: "start"
    });
  }
});

このコードでは、<a>要素のhref属性に指定されたセレクター（#section1）に対応する要素が存在しないため、リンクをクリックしてもスクロールが発生しません。

対処法としては、次のように、リンク先の要素が存在するかどうかを確認し、存在しない場合はエラーメッセージを表示するなどの処理を追加することができます。

JavaScript

const link = document.querySelector("a");
link.addEventListener("click", function(event) {
  event.preventDefault();
  const targetId = this.getAttribute("href");
  const targetElement = document.querySelector(targetId);
  if (targetElement) {
    targetElement.scrollIntoView({
      behavior: "smooth",
      block: "start"
    });
  } else {
    console.error(`リンク先の要素が見つかりません：${targetId}`);
    // エラーメッセージを表示するなどの処理
  }
});

このようにエラーハンドリングを行うことで、リンク先の要素が見つからない場合でも、適切にユーザーにフィードバックを提供できます。

○ハッシュ変更時にページがリロードされてしまう問題の解決策

もう1つのよくあるエラーが、ハッシュの変更時にページ全体がリロードされてしまうという問題です。

これは、<a>要素のデフォルトの動作によるものです。

HTML

<a href="#section1">セクション1へ</a>

<section id="section1">
  <h2>セクション1</h2>
  <p>これはセクション1の内容です。</p>
</section>

このコードでは、<a>要素をクリックするとハッシュが変更され、ページ内の対応する要素にジャンプします。

しかし、同時にページ全体が再読み込みされてしまうため、スクロールアニメーションがスムーズに動作しません。

この問題を解決するには、<a>要素のデフォルトの動作をキャンセルする必要があります。

具体的には、次のようにJavaScriptを使ってクリックイベントのデフォルト動作を防ぐことができます。

JavaScript

const link = document.querySelector("a");
link.addEventListener("click", function(event) {
  event.preventDefault(); // デフォルトの動作をキャンセル
  const targetId = this.getAttribute("href");
  const targetElement = document.querySelector(targetId);
  if (targetElement) {
    targetElement.scrollIntoView({
      behavior: "smooth",
      block: "start"
    });
  }
});

event.preventDefault()を呼び出すことで、<a>要素のデフォルトの動作がキャンセルされ、ページのリロードが発生しなくなります。

これにより、スムーズなスクロールアニメーションが実現できます。

●location.hashの応用例

ここまで、私たちはJavaScriptのlocation.hashを使ったページ内リンクの基本的な実装方法と、よくあるエラーへの対処法を学んできました。

おさらいですが、location.hashはURLのハッシュ部分を操作することで、ページ内の特定の位置へスムーズに移動できる機能でしたね。

では次に、location.hashを応用した、より実践的な使用例を見ていきましょう。

ここからは、ページ内検索やタブ切り替えなど、ユーザーエクスペリエンスの向上につながるテクニックを紹介します。

実際のWebサイト制作にぜひ活かしてみてください。

○サンプルコード6：ページ内検索機能の実装

Webサイトの内容が膨大になると、目的の情報を見つけるのが大変になることがあります。

そんなときに役立つのが、ページ内検索機能です。

location.hashを使えば、検索キーワードをURLに反映させつつ、検索結果の位置へスクロールすることができます。

HTML

<input type="text" id="search-input" placeholder="検索キーワードを入力">
<button id="search-button">検索</button>

<article>
  <section>
    <h2>見出し1</h2>
    <p>本文1</p>
  </section>
  <section>
    <h2>見出し2</h2>
    <p>本文2</p>
  </section>
  <!-- 他のセクションも同様に記述 -->
</article>

JavaScript

const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");

searchButton.addEventListener("click", function() {
  const keyword = searchInput.value.toLowerCase();
  const sections = document.querySelectorAll("section");

  for (let i = 0; i < sections.length; i++) {
    const section = sections[i];
    const heading = section.querySelector("h2").textContent.toLowerCase();
    const content = section.querySelector("p").textContent.toLowerCase();

    if (heading.includes(keyword) || content.includes(keyword)) {
      const sectionId = `section${i + 1}`;
      section.setAttribute("id", sectionId);
      window.location.hash = `#${sectionId}`;
      break;
    }
  }
});

このコードでは、検索ボタンをクリックすると、入力されたキーワードを含むセクションを探します。

見つかった場合は、そのセクションにIDを付与し、location.hashを使って該当位置へスクロールします。

検索キーワードがURLに反映されるため、ユーザーは検索結果のページをブックマークしたり、他の人と共有したりすることができます。

ページ内検索は、ユーザビリティを大きく向上させる機能の1つです。

○サンプルコード7：タブ切り替え機能の実装

タブ切り替えは、限られたスペースで多くの情報を整理するのに適したUIパターンです。

location.hashを使えば、タブの状態をURLと同期させることができ、ブックマーク性や利便性が向上します。

HTML

<div class="tabs">
  <a href="#tab1">タブ1</a>
  <a href="#tab2">タブ2</a>
  <a href="#tab3">タブ3</a>
</div>

<div id="tab1" class="tab-content">
  <h2>タブ1の内容</h2>
  <p>ここにタブ1の内容が入ります。</p>
</div>

<div id="tab2" class="tab-content">
  <h2>タブ2の内容</h2>
  <p>ここにタブ2の内容が入ります。</p>
</div>

<div id="tab3" class="tab-content">
  <h2>タブ3の内容</h2>
  <p>ここにタブ3の内容が入ります。</p>
</div>

JavaScript

const tabs = document.querySelectorAll(".tabs a");
const tabContents = document.querySelectorAll(".tab-content");

function showTab(tabId) {
  tabContents.forEach(content => {
    content.style.display = content.id === tabId ? "block" : "none";
  });
}

tabs.forEach(tab => {
  tab.addEventListener("click", function(event) {
    event.preventDefault();
    const tabId = this.getAttribute("href").substring(1);
    showTab(tabId);
    window.location.hash = tabId;
  });
});

window.addEventListener("hashchange", function() {
  const tabId = window.location.hash.substring(1);
  showTab(tabId);
});

// 初期表示のタブを設定
const initialTabId = window.location.hash.substring(1) || "tab1";
showTab(initialTabId);

このコードでは、タブのリンクをクリックすると、対応するタブ内容が表示され、location.hashが更新されます。

また、URLのハッシュが変更された場合も、適切なタブが表示されるようになっています。

タブ切り替えとlocation.hashを組み合わせることで、ユーザーは現在のタブ状態をURLで確認できるようになり、利便性が向上します。

また、JavaScriptが無効な環境でもタブ機能が動作するようになるのも大きなメリットです。

○サンプルコード8：アニメーションを組み合わせたページ内リンク

先ほど紹介したスムーズスクロールは、ページ内リンクのユーザーエクスペリエンスを向上させる効果的な方法でした。

ここでは、さらにアニメーションを組み合わせて、より洗練されたページ内リンクを実装してみましょう。

HTML

<nav>
  <a href="#section1">セクション1へ</a>
  <a href="#section2">セクション2へ</a>
  <a href="#section3">セクション3へ</a>
</nav>

<section id="section1">
  <h2>セクション1</h2>
  <p>これはセクション1の内容です。</p>
</section>

<section id="section2">
  <h2>セクション2</h2>
  <p>これはセクション2の内容です。</p>
</section>

<section id="section3">
  <h2>セクション3</h2>
  <p>これはセクション3の内容です。</p>
</section>

JavaScript

function scrollToSection(targetId) {
  const targetElement = document.querySelector(targetId);
  if (targetElement) {
    const targetPosition = targetElement.getBoundingClientRect().top;
    const startPosition = window.pageYOffset;
    const distance = targetPosition - startPosition;
    const duration = 1000;
    let start = null;

    function step(timestamp) {
      if (!start) start = timestamp;
      const progress = timestamp - start;
      window.scrollTo(0, easeInOutCubic(progress, startPosition, distance, duration));
      if (progress < duration) window.requestAnimationFrame(step);
    }

    window.requestAnimationFrame(step);
  }
}

function easeInOutCubic(t, b, c, d) {
  t /= d / 2;
  if (t < 1) return (c / 2) * t * t * t + b;
  t -= 2;
  return (c / 2) * (t * t * t + 2) + b;
}

const navLinks = document.querySelectorAll("nav a");
navLinks.forEach(link => {
  link.addEventListener("click", function(event) {
    event.preventDefault();
    const targetId = this.getAttribute("href");
    scrollToSection(targetId);
    window.location.hash = targetId;
  });
});

window.addEventListener("hashchange", function() {
  const targetId = window.location.hash;
  scrollToSection(targetId);
});

このコードでは、ページ内リンクのクリック時とURLのハッシュ変更時に、scrollToSection関数が呼び出されます。

この関数内では、requestAnimationFrameを使ってスクロールアニメーションを実装し、easeInOutCubicというイージング関数で滑らかな動きを実現しています。

アニメーションを取り入れることで、ページ内リンクの遷移がより自然で洗練された印象になります。

ユーザーの目を引き、インタラクティブな体験を提供することができるでしょう。

○サンプルコード9：ページ内リンクのアクセシビリティ向上テクニック

ここまで見てきたように、location.hashを使ったページ内リンクは、Webサイトのユーザビリティを大きく向上させる機能です。

しかし、アクセシビリティの観点からは、いくつか考慮すべき点があります。

ここでは、ページ内リンクのアクセシビリティを向上させるテクニックを紹介します。

HTML

<nav>
  <ul>
    <li><a href="#section1">セクション1へ</a></li>
    <li><a href="#section2">セクション2へ</a></li>
    <li><a href="#section3">セクション3へ</a></li>
  </ul>
</nav>

<section id="section1" tabindex="-1">
  <h2>セクション1</h2>
  <p>これはセクション1の内容です。</p>
</section>

<section id="section2" tabindex="-1">
  <h2>セクション2</h2>
  <p>これはセクション2の内容です。</p>
</section>

<section id="section3" tabindex="-1">
  <h2>セクション3</h2>
  <p>これはセクション3の内容です。</p>
</section>

JavaScript

function scrollToSection(targetId) {
  const targetElement = document.querySelector(targetId);
  if (targetElement) {
    targetElement.setAttribute("tabindex", "-1");
    targetElement.focus({ preventScroll: true });
    targetElement.scrollIntoView({
      behavior: "smooth",
      block: "start"
    });
  }
}

// ページ内リンクのクリックイベントを監視
const navLinks = document.querySelectorAll("nav a");
navLinks.forEach(link => {
  link.addEventListener("click", function(event) {
    event.preventDefault();
    const targetId = this.getAttribute("href");
    scrollToSection(targetId);
    window.location.hash = targetId;
  });
});

// ハッシュ変更イベントを監視
window.addEventListener("hashchange", function() {
  const targetId = window.location.hash;
  scrollToSection(targetId);
});

このコードでは、いくつかのアクセシビリティ向上のテクニックを取り入れています。

まず、各セクションにtabindex="-1"を設定することで、フォーカスを当てられるようにしています。これにより、キーボードでの操作性が向上します。

次に、scrollToSection関数内で、focus()メソッドを使ってターゲット要素にフォーカスを移動しています。

このとき、preventScrollオプションをtrueに設定することで、フォーカス時の自動スクロールを防いでいます。

最後に、scrollIntoView()メソッドでスムーズスクロールを実行し、ターゲット要素までスクロールしています。

○サンプルコード10：ページ内リンクのGoogleアナリティクストラッキング

最後に、ページ内リンクのクリックイベントをGoogleアナリティクスでトラッキングする方法を見ていきましょう。

ページ内リンクの利用状況を分析することで、ユーザーの行動をより深く理解し、Webサイトの改善につなげることができます。

HTML

<nav>
  <ul>
    <li><a href="#section1" data-analytics-label="セクション1">セクション1へ</a></li>
    <li><a href="#section2" data-analytics-label="セクション2">セクション2へ</a></li>
    <li><a href="#section3" data-analytics-label="セクション3">セクション3へ</a></li>
  </ul>
</nav>

<section id="section1">
  <h2>セクション1</h2>
  <p>これはセクション1の内容です。</p>
</section>

<section id="section2">
  <h2>セクション2</h2>
  <p>これはセクション2の内容です。</p>
</section>

<section id="section3">
  <h2>セクション3</h2>
  <p>これはセクション3の内容です。</p>
</section>

JavaScript

function trackEvent(label) {
  if (typeof gtag === "function") {
    gtag("event", "click", {
      event_category: "ページ内リンク",
      event_label: label
    });
  }
}

const navLinks = document.querySelectorAll("nav a");
navLinks.forEach(link => {
  link.addEventListener("click", function(event) {
    event.preventDefault();
    const targetId = this.getAttribute("href");
    const label = this.getAttribute("data-analytics-label");
    trackEvent(label);
    window.location.hash = targetId;
  });
});

このコードでは、各ページ内リンクにdata-analytics-label属性を追加し、アナリティクスのためのラベルを設定しています。

JavaScriptでは、trackEvent関数を定義し、gtag関数を使ってGoogleアナリティクスにイベントを送信しています。

まとめ

JavaScriptのlocation.hashを使ったページ内リンクの実装方法について、基本的な使い方から応用例まで幅広く解説してきました。

ページ内リンクは、Webサイトのユーザビリティとアクセシビリティを向上させる重要な機能です。

サンプルコードを参考に、ぜひ自分のWebサイトにページ内リンクを取り入れてみてください

。スムーズなスクロールやアニメーション効果を加えることで、ユーザーエクスペリエンスをさらに高められるでしょう。

また、実装時のエラーにも適切に対処し、アクセシビリティに配慮することを忘れずに。

analyticsでページ内リンクの利用状況を分析すれば、サイトの改善にも役立ちます。

丁寧なコーディングを心がけ、ユーザーに寄り添ったWebサイト制作を目指しましょう。

皆さんの活躍を応援しています！