サイト閲覧時にスクロール量を表示してくれるjQueryプラグイン「Scrolline.js」

サイト閲覧時にスクロール量を表示してくれるjQueryプラグイン「Scrolline.js」

サイト閲覧時にスクロール量を表示してくれるjQueryプラグイン「Scrolline.js」

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>

あとがき

実装が簡単で気軽に使えます。

非常に長いページで表示すると、わかりやすくて訪問者に親切ですね。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です