ポータル風の Web ページを実装する

はじめに

このプロジェクトでは、Web ページにポータルのような機能を実装する方法を学びます。ポータル機能により、ユーザーは長い Web ページ上で目的のコンテンツを迅速に見つけて移動できます。

👀 プレビュー

Portal functionality demonstration

🎯 タスク

このプロジェクトでは、以下を学びます。

プロジェクトファイルと構造を設定する方法
JavaScript と jQuery を使用してポータル機能を実装する方法
サイドボタンがユーザーのスクロール位置に基づいて色を変えるようにする方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

Web 開発プロジェクトを構築して設定すること
JavaScript と jQuery を使用して DOM を操作し、ユーザーインタラクションを処理すること
長い Web ページ上のユーザー体験を向上させるためのポータルのような機能を実装すること

プロジェクト構造を設定する

このステップでは、プロジェクトファイルと構造を設定します。以下の手順に従ってこのステップを完了してください。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── index.html
├── css
├── images
└── js
    ├── index.js
    └── jquery-3.6.0.min.js

この構造では：
- index.html はメインページです。
- css はスタイルファイル用のフォルダです。
- images は画像リソース用のフォルダです。
- js/index.js は完成させる必要のある JS ファイルです。
- js/jquery-3.6.0.min.js は jQuery ライブラリファイルです。
WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

ポータル機能を実装する

このステップでは、js/index.js ファイルのコードを完成させて、ポータルの機能を実装します。

js/index.js ファイルに以下のコードを追加します。

$(window).scroll(function () {
  // ページが指定された範囲までスクロールすると、対応するサイドボタンの色が変わります。
  let top = scrollY;
  $("#lift a").removeClass("active-color");
  if (top >= 0 && top < 960) {
    $("#lift a:nth-of-type(1)").addClass("active-color");
  } else if (top >= 960 && top <= 1920) {
    $("#lift a:nth-of-type(2)").addClass("active-color");
  } else {
    $("#lift a:nth-of-type(3)").addClass("active-color");
  }
});

function toFunction(scrollTopVal) {
  // ボタンをクリックすると、指定された位置までページがスクロールします。
  window.scrollTo(0, scrollTopVal);
}

解説：
- $(window).scroll() 関数は、ページのスクロール位置を検出するために使用されます。
- ページが指定された範囲までスクロールすると、対応するサイドボタンにアクティブなスタイル（.active-color）が与えられ、他のボタンのスタイルはデフォルト（.default-color）に設定されます。
- toFunction() 関数は、ユーザーがサイドボタンをクリックしたときに、ページを指定された位置までスクロールさせるために使用されます。

ポータル機能をテストする

ブラウザに戻り、ページを更新します。
ページの側面にある 上部、中央、または下部 のボタンをクリックし、ページが対応する範囲までスクロールすることを確認します。
ページが指定された範囲までスクロールすると、対応するサイドボタンにアクティブなスタイル（.active-color）が与えられていることを確認します。

最終結果は以下に示されています。

Portal functionality demonstration

おめでとうございます！あなたはプロジェクトにおいてポータル機能を成功裏に実装しました。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験（Lab）をもっとたくさん練習することができ、あなたの技術を向上させることができます。