Web技術系中心に割と何でも更新中

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

Programming Web

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

scrollpupjsのサンプルページ

真ん中に表示されているJavaScriptコードをそのまま使ってみます。

公式のデフォルト設定

scrollpup({
  background: '#F00',
  height: '20px'
})

JavaScriptに上記コードを記述するだけでOK。すごい。
簡潔で分かりやすいですね。

実装イメージ

プログレスバー実装イメージ

設定できる項目

  • background・・・バーの色
  • height・・・バーの高さ

CSSで指定する時と同じように設定できます。

scrollpup({
  background: '#0089ff',
  height: '50px'
})

プログレスバーの色をブルーに変更して、高さも大きめにしてみます。

実装イメージ

プログレスバー実装イメージ

少し強調されたイメージになりました。

まとめ

scrollpup.jsでプログレスバーを実装する方法について再度まとめます。

ポイント

  • scrollpup.jsの実装用JavaScriptファイルを読み込む
  • 動作させるためのJavaScriptを記述する
  • プログレスバーの色と高さを指定する

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

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

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

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