gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでスクロール操作する方法｜DAD UNION

gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでページ内をスクロール操作して移動する方法をご紹介します。

Contents

gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでページ内をスクロール操作して移動するCSSの記述
gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでページ内をスクロール操作して移動するHTMLの記述
gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでページ内をスクロール操作して移動するJavaScriptの記述
gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでスクロール操作できるデモページ
ソース元：gridscrolling.js

gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでページ内をスクロール操作して移動するCSSの記述

※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>

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>

gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでページ内をスクロール操作して移動するJavaScriptの記述

※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>