JavaScript

Webページ内でのアンカーリンク移動：id属性以外の選択肢

  /

Webページでのアンカーリンクを使ったページ内移動は、情報へのアクセスを迅速にし、ユーザーエクスペリエンスを向上させる効果的な方法です。
一般的にはid属性を用いて実現されますが、他の属性を使用した方法についても探求する価値があります。

Contents

アンカー移動とは、一般的なアンカー移動

アンカー移動は、同一ページ内の指定した位置に直接移動する手法です。通常、href=”#section1″のようにリンクを設定し、目的のセクションにid=”section1″という属性を与えることでリンク先として機能させます。

id属性以外（class属性）を使ったページ内アンカー移動方法

JavaScriptを使用することで、classやname、さらにはカスタムデータ属性（data-*）を用いてアンカー移動を実装することが可能です。
以下に、class属性を使用したページ内移動のデモ例を示します。

CSSの記述

高さが2000pxのコンテンツエリア（.content）と、その下にアンカー移動先のclass属性（.anchorArea）エリアのcss記述です。

<style>
html,body {
    text-align: center;
    margin: 0;
    padding: 0;
}
h1{
    text-align: center;
    font-size: 18px;
    padding: 40px 0;
    margin: 0;
    line-height: 1.8em;
    width: 100%;
    color: #ffffff;
}
a{
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
}
.content {
    height: 2000px;
    background-color: #000000;
}
.anchorArea{
    height: 500px;
    font-size: 20px;
    padding: 30px 0;

}
</style>

HTMLの記述

リンクタグに「#class属性名」（href=”#anchorArea”）を指定します。

<div class="content">
    <h1>class属性名にページ内アンカー移動するデモページ</h1>
    <a href="#anchorArea">ココをクリックすると下の「class="anchorArea"」エリアに移動します↓</a>

</div>
<div class="anchorArea">「class="anchorArea"」エリアです。</div>

JavaScriptの記述

name属性やclass属性、その他の属性を持つ要素をターゲットとしてJavaScriptでページ内移動を実装することができます。
例えば、class属性を使用して移動する場合、以下のようなスクリプトを書くことができます。

<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const targetClass = this.getAttribute('href').substring(1);
        const targetElement = document.querySelector(`.${targetClass}`);
        if (targetElement) {
            window.scrollTo({
                top: targetElement.offsetTop,
                behavior: 'smooth'
            });
        }
    });
});
</script>

class属性名にページ内アンカー移動するデモページ

このデモページでは、class属性を使って特定のエリアへスムーズにスクロールする機能をJavaScriptで実装しています。リンクをクリックすると、該当するclassを持つ要素までページが滑らかに移動します。

class属性名にページ内アンカー移動するデモページ

メリット

  • 柔軟性：任意の属性や複数の要素に基づいてナビゲーションを設計できるため、より複雑な条件でのページ内移動が可能になります。
  • デザインとの一致：既存のHTML構造を変更せずに、デザインや既存のクラスに基づいて動作させることができます。
  • ページの構造を変えずに、既存のclassや他の属性を利用できる。

デメリット

  • JavaScriptへの依存：JavaScriptが無効になっている場合や、JavaScriptの読み込みに失敗した場合にはページ内移動が機能しなくなります。
  • パフォーマンス：JavaScriptを多用するとページの読み込み速度や実行速度に影響を与える可能性があります。
  • 保守性：JavaScriptでカスタム実装を行うと、後からコードを理解しにくくなることがあり、保守が難しくなる可能性があります。
  • id属性に比べてSEO効果が低い可能性がある。
  • アクセシビリティ：idを使用した通常のアンカーリンクに比べて、JavaScriptに依存するとスクリーンリーダーやキーボードナビゲーションを使用するユーザーにとってアクセスしにくくなる可能性があります。

まとめ

ページ内アンカーリンク移動には、id属性が最も一般的で効率的ですが、特定の状況下でclassや他の属性を利用する方法も実用的です。技術的な要件や目的に応じて最適な方法を選択し、アクセシビリティやユーザーエクスペリエンスを常に考慮することが重要です。

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

ページ内アンカー アンカーリンク
関連記事