jQueryの「windows.js」プラグインを使用してみました。
「windows.js」プラグインは画面のスクロール位置を自動で調整してくれるプラグインです。
スクロール位置が中途半端な場合、指定した位置まで画面が移動して自動補正します。
下記のような画面の途中でスクロールを止めます。
指定した秒数が経過したら、位置が自動でスクロールするのです。
「windows.js」プラグインは下記よりダウンロードできます。
http://nick-jonas.github.io/windows/
下記にjQueryの「windows.js」プラグインの使用して、
画面のスクロール位置を自動補正させた際の使用方法をメモします。
■ 「windows.js」プラグインで画面位置を自動調整
【JS】
jQueryとwindows.jsファイルを読み込みます。
windows.jsを使用するように設定します。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="js/jquery.windows.js"></script> <script type="text/javascript"> $(function() { $('.window').windows({ snapping: true, snapSpeed: 500, snapInterval: 1000, onScroll: function(s){}, onSnapComplete: function($el){}, onWindowEnter: function($el){} }); }); </script>
snapping:自動スクロールするかを指定します。
snapSpeed:スクロールする速度を指定します。
snapInterval:自動スクロールするまでの時間を指定します。
【CSS】
CSSでセクションごとのbackgroundと位置を指定します。
backgroundは画像を指定してもOKです。
<style type="text/css"> html, body { margin: 0; padding: 0; height: 100%; } .window { width: 100%; height: 100%; position: absolute; } #area1 { background: #d5d7dd; top: 0%; } #area2 { background: #1babb7; top: 100%; } #area3 { background: #6ab29f; top: 200%; } </style>
【HTML】
セクションに「class=”window”」を指定します。
<section id="area1" class="window"></section> <section id="area2" class="window"></section> <section id="area3" class="window"></section>
上記の設定をすると、中途半端な位置にスクロールがある場合、
画面位置を自動で調整してくれるようになります。