Googleウェブページをスクロールさせると、その動きにシンクロしてプログレスバーが表示される[Scrollgress]の使い方を紹介します。実際に導入してみましたので、まずはサンプルをご覧ください。[Scrollgress]:実装サンプルウィンドウを下にスクロールしていくと画面上部にプログレスバーが表示され、横に伸びていくのが確認できます。配布サイトから必要なファイルを手に入れます。ZIP』をクリックすると圧縮されたzipファイルのダウンロードがはじまります。Scrollgressのダウンロード:Githubこのファイルを解凍すると、さらにいくつかのフォルダとファイルに展開されます。このうち必要になるのは[scrollgress.js]というJavaScriptファイルのみ。ホストされている[jquery.js]を利用することにして、両JSファイルをHTMLの適当な箇所で読み込みます。src="scrollgress.js"></script>さらに続けて[Scrollgress]を初期化させるためのコードも記述します。上記のコードにつなげて書くと以下のようになります。{$('body').scrollgress();});</script>基本的にこれだけで[Scrollgress]が機能します。「プログレスバーが表示されない!」という場合は、スタイルシートの設定を確認してみてください。稀なケースですが、CSSでhtml要素またはbody要素の高さの指定方法が適切でないとプログレスバーが表示されません。下記は一例ですが、このCSSを効かせると表示される場合があります。{height:auto;}また、今回はbody要素に対して[Scrollgress]を効かせましたが、他のボックス要素に対しても設定することが可能です。オプション設定[Scrollgress]のオプション設定では「高さ」と「色」と「Scrollgress起動時のコールバック」を指定することが可能です。使い方は以下のとおり。initiated.');}});});.scrollgressの引数で、それぞれ「height」「color」「success」の値を指定していくだけ。jQuery初心者の方でも充分に扱える親切設計。ウェブサイトのちょっとしたワンポイントのアクセントとして取り入れるのも面白いはずです。スクロールに連動するシンプルなプログレスバーを取り入れたい方は、ぜひ使ってみてください。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。