スクロール量をプログレスバーで表示してくれるjQueryプラグイン「Scrollgress」

スクロール量をプログレスバーで表示してくれるjQueryプラグイン「Scrollgress」

スクロール量をプログレスバーで表示してくれるjQueryプラグイン「Scrollgress」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加

Scrollgressは、ページのスクロール量をプログレスバーで視覚的にわかりやすく表示してくれるjQueryプラグインです。

動作については、デモページをご参照ください。スクロール量に応じて、ページ上部にプログレスバーが表示されます。

デモページを見る

スポンサードリンク

Scrollgressの使い方

まずは、GitHubからファイルをダウンロードします。ダウンロードしたファイルを解凍し、buildフォルダの中にあるscrollgress.min.jsをサーバーにアップロードします。

続いて、HTMLの</body>直前に以下を記述します。

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

これで、ページ上部にスクロール量を示すプログレスバーが表示されるようになります。

Scrollgressのオプション

Scrollgressでは、オプションを指定することもできます。

height 高さ
color バーの色
success Scrollgress起動時のコールバック

オプションを指定すると、以下のようになります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="scrollgress.min.js"></script>
<script>
$(function() {
$('body').scrollgress({
height: '10px',
color: '#990000',
success: function() {
console.log('Scrollgress has been initiated.');
}
});
});
</script>

あとがき

同じようにスクロール量を表示するものとしては、先日ご紹介したScrolline.jsというjQueryプラグインもあります。

簡単に実装できるので、縦長ページなどでぜひご活用ください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。