ウィンドウ上端にページのスクロール量を示すプログレスバーを表示

ページを上下にスクロールした時に、そのスクロール量をウィンドウ上端に表示する。

デモページを表示

CSS

補足

• 動的に追加されるプログレスバーのスタイルを設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• body要素に、プログレスバー用のブロック要素（div#progress-bar）を動的に追加している。
• スクロール量に応じて、ページ全長に対する割合を求め、プログレスバーの長さ（＝幅）を設定している。
• このサンプルでは、スクロール量ゼロの場合はプログレスバーの長さをゼロにしている。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• このサンプルでは、body要素にプログレスバー用のブロック要素（div#progress-bar）を動的に追加している。