ウェブサイトの上部にプログレスバーを設置して、スクロール量を視覚的に表示してくれるプラグイン［Scrolline.js］を紹介します。

まずはサンプルをどうぞ。

Scrolline.js : https://on-ze.com/demo/jquery-scrolline.js/

シングルページで、長文を読ませるようなサイトで真価を発揮しそうですね。

導入方法は以下より。

［Scrolline.js］の実装方法

スクリプトの配布サイト GitHub より、必要なファイルをダウンロードしてきます。

GitHub : https://github.com/anthonyly/Scrolline.js

ダウンロードした圧縮ファイル『Scrolline.js-master.zip』を解凍すると『jquery.scrolline.js』というスクリプトが梱包されています。
基本的に必要なのはこのJavaScriptファイル１つだけ。

これをHTMLの適当な箇所で読み込みます。
別途jQueryの本体が必要なので Google のCDNにホストされている［jquery.min.js］を利用します。
下記のコードを参考に各ファイルを読み込みましょう。

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

続けて［Scrolline.js］を初期化します。

<script>
$(function() {
$.scrolline();
});
</script>

まとめて記述すると次のようになりますね。

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

なんと、たったコレだけで実装完了です。
超カンタンですね。

オプション設定

オプションの設定により、プログレスバーの進行方向を逆にしたり、バーの高さや色を指定したり、表示位置を上下左右に変更したりと、痒いところにも手が届く設計になっています。

backColor
背景色を指定。（初期値：'#ecf0f1'）
direction
'vertical' または 'horizontal' で指定可能。（初期値：'horizontal'）
frontColor
前面のバーの色。（初期値：#2ecc71）
opacity
透明度。'0'〜'1'の間で指定。（初期値：1）
position
バーを表示する位置。'top'、'bottom'、'left'、'right' で指定。（初期値：'top'）
reverse
プログレスバーの進行方向。（初期値：false）
weight
プログレスバーの高さ、または幅。（初期値：5）
zindex
要素の重なり順。CSSの「z-index」の値をコントロール。（初期値：10）
scrollEnd
コールバック関数。スクロールが終了したときの処理。

参考までに。
各オプションを記述すると次のようになります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="scrollgress.js"></script>
<script>$(function() {
$.scrolline({
	backColor : '#ccc',
	frontColor : '#111111',
	weight : 16,
	scrollEnd : function() {
		alert('スクロール終了！');
	}
});
});</script>

似たようなプラグインで、以前このブログでも紹介した［Scrollgress］もオススメです。

【jQuery】ページのスクロール量に連動してプログレスバーを実装する［Scrollgress］の使い方

どちらも jQuery ベースで比較的簡単に実装できるので初心者の方でも扱いやすいでしょう。
是非お試しください。

GitHub : https://github.com/anthonyly/Scrolline.js