垂直・水平スクロールを簡単に実現！gridscrolling.jsでキーボード操作のウェブページナビゲーションを実装する方法

Webページにおいてスムーズなユーザー体験を提供するためには、効率的なナビゲーションが重要です。
今回は、gridscrolling.jsを利用して、ページ内での垂直・水平方向へのスクロール操作を簡単に実装する方法をご紹介します。

gridscrolling.jsとは？

gridscrolling.jsは、ページ内の特定のセクション間をキーボードの矢印キーでナビゲートすることを可能にするJavaScriptライブラリです。これにより、ユーザーはページ内のコンテンツを直感的に探索することができます。

スタイルの設定

gridscrolling.cssファイルを読み込みます。「#gridscrolling-XXXX」や「.gridscrolling-XXXX」は矢印やページ内現在位置のCSS記述です。

<link rel="stylesheet" href="gridscrolling.css">
<style>
html, body {
  height: 100%;
  width: 100%;
}
body {
  font-size: 16px;
  text-align: center;
}
h1,h2{
  text-align: center;
  font-size: 26px;
  line-height: 1.8em;
  padding: 220px 0 0 0;
}
#gridscrolling-overview { border-color: #BBB; }
.gridscrolling-overview-square { background-color: #BBB; }
.gridscrolling-looking-at { background-color: #48F; }
#gridscrolling-top-marker { border-bottom-color: #357; }
#gridscrolling-bottom-marker { border-top-color: #357; }
#gridscrolling-left-marker { border-right-color: #357; }
#gridscrolling-right-marker { border-left-color: #357; }
</style>

HTMLの構造

次に、gridscrolling.jsでスクロール操作を行いたいエリアをHTMLで定義します。
垂直・水平方向にページ内スクロール移動できるエリア（header、section、aside）を用意します。

<header>
  <h1>gridscrolling.jsを使って垂直、水平方向へのスクロール出来るページです。<br>キーボードの上下左右矢印で操作してみて下さい。</h1>
  <p><a href="#area1" name="top">このリンククリック</a>で「name="area2"」エリアにアンカースクロール移動できます。</p>
</header>

<section>
  <hgroup><h2>下「↓」矢印キーをクリックしてください。</h2></hgroup>
</section>

<section>
  <hgroup><h2>右「→」矢印キーをクリックしてください。</h2></hgroup>
  <p>または、下「↓」矢印キーをクリックしてください。</p>
</section>
<aside>
  <hgroup><h2>右「→」矢印キーをクリックしてください。</h2></hgroup>
  <p><a href="#area1">このリンククリック</a>でも右エリアにスクロールします。</p>
  <p>戻る場合は、左「←」矢印キーをクリックしてください。</p>
</aside>
<aside>
  <hgroup><h2><a name="area1">左「←」矢印キーをクリックしてください。</a></h2></hgroup>
</aside>

<section>
  <hgroup><h2>下「↓」矢印キーをクリックしてください。</h2></hgroup>
</section>

<section>
  <hgroup><h2>右「→」矢印キーをクリックしてください。</h2></hgroup>
  <p><a href="#area2">このリンククリック</a>でも右エリアにスクロールします。</p>
  <p>戻る場合は、左「←」矢印キーをクリックしてください。</p>
</section>
<aside>
  <hgroup><h2><a name="area2">左「←」矢印キーをクリックしてください。</a></h2></hgroup>
</aside>

<section>
  <hgroup><h2>上「↑」矢印キーをクリックしてください。</h2></hgroup>
  <p>または、<a href="#top">このリンククリック</a>で、一番上「name="top"」エリアにアンカースクロール移動できます。</p>
</section>

JavaScriptの設定

gridscrolling.jsとjQueryを読み込み、スクロール移動エリアを初期化します。jquery.min.js（2系）、gridscrolling.jsファイルを読み込みます。
$(‘スクロール移動エリア’).gridscrolling(“init”, {オプション})を記述します。オプションでは移動スピードやページ内現在位置表示等を設定できます。以下のスクリプトをページに追加してください。

<script src="jquery.min.js"></script>
<script src="gridscrolling.js"></script>
<script type="text/javascript">
$(function() {
  $('body').gridscrolling("init", {
      animationSpeed: 400,
      showMarker: true,
      showOverviewMap: true
  });
});
</script>

gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでスクロール操作できるデモページ

実際にgridscrolling.jsを使ったスクロール操作ができるデモページは、こちらからご覧いただけます。

gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでスクロール操作できるデモページ

ソース元：gridscrolling.js

gridscrolling.js

まとめ

gridscrolling.jsを使用することで、ページ内での垂直・水平方向へのスムーズなスクロール操作を実現できます。ユーザーがページ内のコンテンツを効率的に探索できるようになり、より良いユーザー体験を提供することが可能です。ぜひこの機能を活用して、ユーザーフレンドリーなWebサイトを構築してください。

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