【scrollpup.js】スクロール量に対応したプログレスバーを実装する方法
この記事の概要

スクロール量に対応して増減するプログレスバーを簡単に実装したいけど、いい方法は無いかな?

「scrollpup.js」で実装できます。このあと詳しく説明しますね。
本記事の内容
- scrollpup.jsを導入して、スクロール量に対応したプログレスバーを実装する方法
Web制作をしている中で、スクロール量に対応したプログレスバーというものを実装する機会がありました。
例えば、下記のようなページで使われているものです。
scrollpup.js
このようになスクロール量に対応したプログレスバーを自分で作ろうとすると、時間と労力がかかります。要するに面倒くさいです。
そこで、数行くらいのコードを記述するだけでプログレスバーを実装する方法を紹介します。具体的には、scrollpup.js
というJavaScriptプラグインを使った方法になります。
scrollpup.jsのによるプログレスバー実装方法
具体的な実装方法を詳しく説明します。
動作に必要なファイルを読み込み
<head>内にプログレスバー実装用のJavaScriptファイル記述します。
JavaScriptファイルの読み込み方法
- GitHub上のJavaScriptファイルを直接読み込む方法
- ダウンロードして、サーバーにアップロードして読み込む方法
それぞれ詳しく説明します。
GitHub上のJavaScriptファイルを直接読み込む方法
<script src="https://flouthoc.github.io/scrollpup.js/dist/scrollpup.js"></script>
上記コードを<head>内に記述します。
ダウンロードして、サーバーにアップロードして読み込む方法
GitHubにファイルが公開されています。
GitHub – flouthoc/scrollpup.js
JavaScriptファイルの中身のコードはこちら。
scrollpup.min.js
コードの中身をコピペして、scrollpup.min.js
という名前で保存し、サイトを運営しているサーバーの任意の場所へアップします
<script src="(任意のパス)/scrollpup.min.js"></script>
事前準備はこれだけでOK。
JavaScript
次に、実際に動作させるためのJavaScriptのコードを記述します。
scrollpup.jsのサンプルページを見てください。
scrollpup.js

真ん中に表示されているJavaScriptコードをそのまま使ってみます。
公式のデフォルト設定
scrollpup({
background: '#F00',
height: '20px'
})
JavaScriptに上記コードを記述するだけでOK。すごい。
簡潔で分かりやすいですね。
実装イメージ

設定できる項目
background
・・・バーの色height
・・・バーの高さ
CSSで指定する時と同じように設定できます。
scrollpup({
background: '#0089ff',
height: '50px'
})
プログレスバーの色をブルーに変更して、高さも大きめにしてみます。
実装イメージ

少し強調されたイメージになりました。
まとめ
scrollpup.jsでプログレスバーを実装する方法について再度まとめます。
ポイント
- scrollpup.jsの実装用JavaScriptファイルを読み込む
- 動作させるためのJavaScriptを記述する
- プログレスバーの色と高さを指定する
ものの数分で簡単にプログレスバーを実装できるので、お試しください。
プログレスバー実装方法まとめ
Webページでプログレスバーを実装する8つの方法まとめ
mineblogでプログレスバーの実装方法をいくつか紹介してきました。各プログレスバーの実装方法について、その特徴や用意されているオプションを含めてまとめました。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 YouTubeライブで気をつけるべきチャットへのコメントマナーまとめ
おすすめ記事 お名前.comのドメインプロテクションは必要か【採算がとれるか】