2020/06/04 (更新日: 2020/07/02)

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

Programming Web

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

こういった疑問にお答えします。

本記事の内容

scrollpup.jsを導入して、スクロール量に対応したプログレスバーを実装する方法

こんにちは、mine（@mineblog7）です。

ブログ歴は4年ほどになります。
現在はmineblogを一人で運営しています。

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を記述する
プログレスバーの色と高さを指定する

ものの数分で簡単にプログレスバーを実装できるので、お試しください。

プログレスバー実装方法まとめ

おすすめ記事【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事「知らないから落ちる面接の４点減点法」で面接に挑んだ結果

Programming