ウェブページをスクロールさせると、その動きにシンクロしてプログレスバーが表示される［Scrollgress］の使い方を紹介します。

実際に導入してみましたので、まずはサンプルをご覧ください。

［Scrollgress］：実装サンプル

ウィンドウを下にスクロールしていくと画面上部にプログレスバーが表示され、横に伸びていくのが確認できます。

［Scrollgress］の使い方

配布サイトから必要なファイルを手に入れます。
下記のリンク先より『Download ZIP』をクリックすると圧縮されたzipファイルのダウンロードがはじまります。

Scrollgressのダウンロード：Github

このファイルを解凍すると、さらにいくつかのフォルダとファイルに展開されます。このうち必要になるのは［scrollgress.js］というJavaScriptファイルのみ。

ここでは公式サイトの例に倣って Google のCDN にホストされている［jquery.js］を利用することにして、両JSファイルをHTMLの適当な箇所で読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="scrollgress.js"></script>

さらに続けて［Scrollgress］を初期化させるためのコードも記述します。
上記のコードにつなげて書くと以下のようになります。

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

基本的にこれだけで［Scrollgress］が機能します。
超カンタンですね。

もし「プログレスバーが表示されない！」という場合は、スタイルシートの設定を確認してみてください。

稀なケースですが、CSSでhtml要素またはbody要素の高さの指定方法が適切でないとプログレスバーが表示されません。

下記は一例ですが、このCSSを効かせると表示される場合があります。

html,
body {
height:auto;
}

また、今回はbody要素に対して［Scrollgress］を効かせましたが、他のボックス要素に対しても設定することが可能です。

オプション設定

［Scrollgress］のオプション設定では「高さ」と「色」と「Scrollgress起動時のコールバック」を指定することが可能です。
使い方は以下のとおり。

$(function() {
	$('body').scrollgress({
		height: '10px',
		color: '#990000',
		success: function() {
			console.log('Scrollgress has been initiated.');
		}
	});
});

.scrollgressの引数で、それぞれ「height」「color」「success」の値を指定していくだけ。これも簡単ですね。

jQuery初心者の方でも充分に扱える親切設計。
ウェブサイトのちょっとしたワンポイントのアクセントとして取り入れるのも面白いはずです。

スクロールに連動するシンプルなプログレスバーを取り入れたい方は、ぜひ使ってみてください。