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>
上記の設定をすると、中途半端な位置にスクロールがある場合、
画面位置を自動で調整してくれるようになります。
