JavaScript

画像が多いページでも安心！JavaScriptでズレないアンカーリンクを実現する方法

 

Webサイト制作を進めていく中で、複数ページ間のナビゲーションや特定の場所への移動をスムーズに行うことは、ユーザーエクスペリエンスを向上させる上で非常に重要です。特に、ページ内リンク（アンカーリンク）を使用する際、リンク先のターゲット位置がずれてしまう問題に悩まされることがあります。この問題は、ページの読み込み速度や画像のロードに影響されることが多いため、意図した場所に確実にスクロールさせるためには、少し工夫が必要です。

今回は、こうした問題を解決するために、JavaScriptを活用してアンカー移動を確実に制御する方法を解説します。理解しやすいように、具体的なコード例とともに説明していきます。

Contents

Webサイト制作で困ったこと

実際にWebサイトを作成する際、以下のようなシチュエーションで困った経験はありませんか？

例えば、a.htmlとb.htmlという2つのページがあり、a.htmlからb.html#anchorというリンクをクリックすると、b.htmlのページ下部にあるid=”anchor”の位置に自動的に移動させたいとします。しかし、b.htmlには画像が多数使用されているため、通信速度やページ読み込み速度によっては、ターゲットの位置がずれてしまうことがあります。

このような場合、どのようにすれば確実にターゲット位置にスクロールさせることができるのでしょうか？これを解決するために、具体的な手順を見ていきましょう。

ページ間のターゲット位置へのアンカー移動を作って見よう

まず、問題の概要を理解した上で、ページ間でターゲット位置に移動させるアンカーリンクを作成してみましょう。今回の例では、以下の要件を満たすデモページを作成します。

  1. a.htmlからb.htmlに遷移し、b.htmlの指定された位置（id=”anchor”）に確実にスクロールする。
  2. 画像などのリソースの読み込み状況に依存せず、ターゲット位置がずれないようにする。

CSSの記述

まずは、ページの見た目を整えるためにCSSを定義します。今回のデモページでは、ページ全体のスクロールをスムーズに行うため、scroll-behaviorプロパティを使用しています。

<style>
html { 
  scroll-behavior: smooth;
}
body {
    padding: 0;
    margin: 0;
    font-size: 18px;
    text-align: center;
    line-height: 1.8em;
}
h1{
    text-align: center;
    font-size: 20px;
    padding: 20px 0;
    line-height: 1.8em;
}
img{
    padding: 0;
    margin: 0;
    vertical-align: bottom;
}
#anchor{
    font-size: 24px;
    font-weight: bold;
    padding: 40px 0 800px 0;
}
</style>

CSS解説

  • scroll-behavior: smooth
    全体のスクロールをスムーズに行うための設定です。ページ内リンクをクリックした際に、スクロールが滑らかに行われるようになります。
  • bodyの設定
    文字サイズや余白の設定を行っています。ここでは、基本的なページレイアウトを整えています。
  • #anchor
    ターゲットとなる要素のスタイルです。この要素がページ内のどこに表示されるかが重要です。余白を十分に確保することで、ターゲット位置がはっきりとわかるようにしています。

HTMLの記述

次に、HTMLの構造を見ていきます。ここでは、ページ内リンクを設置し、画像の後にターゲットとなる要素を配置しています。

<h1>JavaScriptを使ってページ間のアンカーリンク移動でもズレないアンカー移動を実現<br><a href="#anchor">↓ターゲット位置（id="anchor"）に移動</a></h1>

<img src="large-image1.jpg" alt="Large Image 1" width="600"><br>
<img src="large-image2.jpg" alt="Large Image 2" width="800">

<div id="anchor">ここがターゲットの位置です</div>

HTML解説

  • href=”#anchor”
    ページ内リンクです。このリンクをクリックすると、ページ内のid=”anchor”に移動します。
  • large-image1.jpg、large-image2.jpg
    大きな画像を配置しています。この画像の読み込みが完了するまでターゲット位置への移動がずれてしまう問題を解消するために、後述のJavaScriptを使用します。
  • id=”anchor”
    ターゲットとなる要素です。ページ内リンクの行き先となります。

JavaScriptの記述

最後に、JavaScriptを使ってページ内リンクの動作を制御します。これにより、画像の読み込みが完了してからターゲット位置に確実にスクロールさせることができます。

<script>
window.onload = function() {
// 現在のURLにハッシュが含まれているか確認
if (window.location.hash) {
    const target = document.querySelector(window.location.hash);
    if (target) {
        // 目的の要素へスクロール
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
}
};
</script>

JavaScript解説

  • window.onload
    ページのすべてのコンテンツが読み込まれた後に実行されます。これにより、画像などのリソースが完全にロードされてからスクロールを行うことができます。
  • window.location.hash
    現在のURLに含まれているハッシュ（例: #anchor）を取得し、ターゲット要素を特定します。
  • target.scrollIntoView
    ターゲット要素がビューポート内に確実に表示されるようにスクロールします。block: ‘start’により、ターゲットがビューポートの上部に配置されます。

JavaScriptを使ってページ間のアンカーリンク移動でもズレないアンカー移動を実現したデモページ

以下のデモページで実際の動作を確認してみてください。ページ内リンクをクリックすると、画像が読み込まれた後に指定されたターゲット位置にスムーズにスクロールされる様子が確認できます。この方法を使えば、ユーザーが快適にサイトを閲覧できるようになります。

JavaScriptを使ってページ間のアンカーリンク移動でもズレないアンカー移動を実現したデモページ

注意点

  • 画像や他のリソースの読み込み時間:
    大きな画像が多いページでは、ユーザーの通信環境により読み込みに時間がかかることがあります。この場合、JavaScriptを活用して、読み込みが完了してからスクロールすることで、ターゲット位置のずれを防ぐことができます。
  • ブラウザの互換性:
    scrollIntoViewは、モダンブラウザで広くサポートされていますが、古いブラウザでは対応していない場合があります。そのため、特定のブラウザ向けにはフォールバック方法を考慮する必要があるかもしれません。

まとめ

今回紹介した方法を使えば、ページ間でのアンカー移動時にターゲット位置がずれる問題を解消できます。特に、ページ内に多数の画像や大きなコンテンツが含まれている場合に有効です。Webサイトのユーザーエクスペリエンスを向上させるためにも、ぜひ活用してみてください。

この技術をマスターすることで、より洗練されたナビゲーションを実現し、ユーザーが快適にサイトを利用できるようになるでしょう。簡単に実装できる内容なので、まずはデモページで試してみて、自分のプロジェクトにも応用してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

アンカーリンク anchor
関連記事