Scrollgressは、ページのスクロール量をプログレスバーで視覚的にわかりやすく表示してくれるjQueryプラグインです。
動作については、デモページをご参照ください。スクロール量に応じて、ページ上部にプログレスバーが表示されます。
Scrollgressの使い方
まずは、GitHubからファイルをダウンロードします。ダウンロードしたファイルを解凍し、buildフォルダの中にあるscrollgress.min.jsをサーバーにアップロードします。
続いて、HTMLの</body>直前に以下を記述します。
1 2 3 4 5 6 7 | <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起動時のコールバック |
オプションを指定すると、以下のようになります。
01 02 03 04 05 06 07 08 09 10 11 12 13 | <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プラグインもあります。
簡単に実装できるので、縦長ページなどでぜひご活用ください。