Scrolline.jsは、ページ全体のどこまでスクロールしているかを、視覚的にわかるように表示してくれるjQueryプラグインです。
動きについては、デモページをご参照ください。ページの上部に、緑色のバーでスクロール量が表示されます。
Scrolline.jsの使い方
まずは、GitHubからファイルをダウンロードします。ダウンロードしたファイルを解凍し、jquery.scrolline.jsをサーバー上にアップロードしてください。
jquery.scrolline.jsをサーバーにアップしたら、HTMLの</body>直前に以下を記述します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.scrolline.js"></script>
<script>
$(function() {
$.scrolline();
});
</script>
これだけでScrolline.jsが実行されて、スクロール量を示すバーが出てきます。
Scrolline.jsのオプション
Scrolline.jsには、様々なオプションが用意されています。
| backColor | 背景色 |
| direction | バーを縦向き(vertical)に表示するか横向き(horizontal)に表示するか |
| frontColor | バーの色 |
| opacity | 透過度 |
| position | バーを表示する位置(‘top’、’bottom’、’left’、’right’) |
| reverse | バーの進行方向を逆にする |
| weight | バーの高さ |
| zindex | z-indexの値。初期値は10 |
| scrollEnd | スクロールが終了した時の処理 |
オプションを指定する場合、以下のように記述します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.scrolline.js"></script>
<script>
$(function() {
$.scrolline({
backColor : '#ccc',
frontColor : '#aaa',
direction : 'vertical',
scrollEnd : function() {
alert('ページの最下部です。');
}
});
});
</script>
あとがき
実装が簡単で気軽に使えます。
非常に長いページで表示すると、わかりやすくて訪問者に親切ですね。