【Scrolline.js】スクロールに対応したプログレスバーを実装する方法

Web制作者
「Webページでスクロールに対応したプログレスバーを表示したい。簡単に実装できる方法が知りたい。」
こういった疑問にお答えします。
本記事の内容
- Scrolline.jsによるプログレスバー実装方法
- Scrolline.jsのオプション
- サンプルいろいろ
こんにちは、mine(@mineblog7)です。
ブログ歴は4年ほどになります。
現在はmineblogを一人で運営しています。
「Webスクロールした時に、スクロール量に対応したプログレスバー実装したい」という場合があります。
プログレスバーのイメージ

こんな感じで、スクロール量に対応したプログレスバーを実装します。
フリー配布されているjQueryプラグインは色々ありますが、今回はScrolline.jsというjQueryプラグインを導入してプログレスバーを実装する方法を紹介します。
Scrolline.jsによるプログレスバー実装方法
Scrolline.jsによるプログレスバーの実装方法を詳しく説明します。
» GitHub – anthonyly/Scrolline.js
実装手順
- jQuery読み込み
- 必要なファイルをダウンロード・読み込み
- 動作用のJavaScriptを記述
jQuery読み込み
まず、head
タグ内でjqueryを読み込みます。
jQueryの読み込み
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>
必要なファイルをダウンロード・読み込み
まず、下記リンクにアクセスします。
» jquery.scrolline.js
右クリックでダウンロードを選択し、そのままjquery.scrolline.js
という名前でローカルに保存します。
保存したjquery.scrolline.js
をサイトをサーバの任意のディレクトリににアップロードします。アップロードしたjquery.scrolline.js
を<head>
内で読み込ませます。
<script type='text/javascript' src='(任意のパス)/jquery.scrolline.js'></script>
これで準備はOKです。
動作用のJavaScriptを記述
下記JavaScriptコードを記述します。
$(function() {
$.scrolline();
});
基本的には、これだけで動作します(ただし、デフォルト設定)。
実装イメージ

スクロールを上下するとバーが増減します。
Scrolline.jsのオプション
Scrolline.jsにはオプションが用意されています。
オプション
オプション | 単位 | デフォルト | 詳細 |
backColor | 文字列 | ‘#ecf0f1’ | プログレスバーの背景色 |
direction | 文字列 | ‘horizontal’ | プログレスバーを横にするか縦にするかを指定できます。 (vertical:縦/horizontal:横) |
frontColor | 文字列 | ‘#2ecc71’ | プログレスバーの色 |
opacity | 数値 | 1 | 透明度の設定。 0~1の間の数値を指定します。 |
position | 文字列 |
横方向の場合:’top’ 縦方向の場合:’left’ |
プログレスバーの位置指定。 横方向の場合:’top’ or ‘bottom’ 縦方向の場合:’left’ or ‘right’ |
reverse | boolean | false | プログレスバーの進む方向を指定。 (true:右から左へ進む/false:左から右へ進む) |
weight | 数値 | 5 | プログレスバーの高さ(px)指定。 |
zindex | 数値 | 10 | プログレスバーのz-indexを指定。 |
scrollEnd | 関数 | – | ページスクロールが終わったら、関数を呼び出す。 |
サンプルいろいろ
オプションの設定を変更して、カスタマイズしたプログレスバーを実装してみます。
サンプル1
サンプル1では下記の設定を変更しています。
サンプル1の設定
- プログレスバーの進行方向を逆にする
- プログレスバーの位置
- プログレスバーの背景色
- プログレスバーの色
- バーの高さ(太さ)
実装イメージ

JavaScript
$.scrolline({
reverse : true,
position : 'bottom',
backColor : '#cccccc',
frontColor : '#009688',
weight : 15
});
reverse : true
にすることで、通常左から右にプログレスバーが伸びるものを右から左に伸びるようにしています。
サンプル2
サンプル1では下記の設定を変更しています。
サンプル1の設定
- プログレスバーを縦に変更
- プログレスバーの位置を右に変更
- プログレスバーの背景色
- プログレスバーの色
- プログレスバーの透明度を変更
- バーの高さ(太さ)
実装イメージ

JavaScript
$.scrolline({
direction : 'vertical',
position : 'right',
backColor : '#bbbbbb',
frontColor : '#ffc107',
opacity: 0.6,
weight : 25
});
また、
opacity: 0.6
を設定して、プログレスバーを透過させています。
サンプル3
サンプル3はオプションで紹介したscrollEnd
を設定します。
JavaScript
$.scrolline({
weight : 10,
scrollEnd : function() {
alert('スクロールを終了しました。');
}
});
scrollEnd
はページをスクロールし終わった時に、設定した関数を実行させることができます。サンプル3では、スクロール完了した時に「スクロールを終了しました。」
というアラートメッセージを表示するような設定をしています。
まとめ
Scrolline.jsによるプログレスバーの実装方法について再度まとめます。
ポイント
- jQueryを読み込む(前提)
- JavaScriptコードを記述
- 必要があればオプションを指定
プログレスバーの配色や、位置、進行方向など、オプションが比較的多いことが特徴です。サイトデザインなどに合わせて導入してみてください。
プログレスバー実装方法まとめ
Webページでプログレスバーを実装する8つの方法まとめ
mineblogでプログレスバーの実装方法をいくつか紹介してきました。各プログレスバーの実装方法について、その特徴や用意されているオプションを含めてまとめました。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果