gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでページ内をスクロール操作して移動する方法をご紹介します。
Contents
ディスプレイ広告
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>
gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでスクロール操作できるデモページ
gridscrolling.jsを使って垂直・水平方向へ上下左右矢印キーでスクロール操作できるデモページ
ソース元:gridscrolling.js
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。