スクロール量をプログレスバーで表示してくれるjQueryプラグイン「Scrollgress」

Scrollgressは、ページのスクロール量をプログレスバーで視覚的にわかりやすく表示してくれるjQueryプラグインです。

動作については、デモページをご参照ください。スクロール量に応じて、ページ上部にプログレスバーが表示されます。

デモページを見る

Scrollgressの使い方

まずは、GitHubからファイルをダウンロードします。ダウンロードしたファイルを解凍し、buildフォルダの中にあるscrollgress.min.jsをサーバーにアップロードします。

続いて、HTMLの</body>直前に以下を記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="scrollgress.min.js"></script>
<script>
$(function() {
 $('body').scrollgress();
});
</script>

これで、ページ上部にスクロール量を示すプログレスバーが表示されるようになります。

Scrollgressのオプション

Scrollgressでは、オプションを指定することもできます。

オプションを指定すると、以下のようになります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="scrollgress.min.js"></script>
<script>
$(function() {
 $('body').scrollgress({
 height: '10px',
 color: '#990000',
 success: function() {
 console.log('Scrollgress has been initiated.');
 }
 });
});
</script>

あとがき

同じようにスクロール量を表示するものとしては、先日ご紹介したScrolline.jsというjQueryプラグインもあります。

簡単に実装できるので、縦長ページなどでぜひご活用ください。