ページスクロール進捗バー（上部）

解説

ページをどこまで読み進めたかを、画面上部の細いバーの伸び具合で示すインジケーターです。仕組みはシンプルで、scroll イベントのたびに「現在のスクロール量 ÷ スクロールできる総量」を百分率で計算し、バーの width をその割合に更新します。バーは position:fixed; top:0 で常に最上部に固定し、z-index を高めにして他要素の上へ。伸び縮みに transition:width を効かせているので、値の更新がカクつかず滑らかに見えます。

効果的な場面

• 読了率を上げたい長文の記事やブログ
• セクションが多い縦長のランディングページ
• 利用規約やマニュアルなど、残量を知らせたい長いページ

バーの色や太さは .prog の background と height で自由に変えられ、グラデーションにするとブランド感を出せます。注意点として、scroll イベントは高頻度で発火するため、重い処理を中に書くと動作が重くなります。ここでは width 更新だけに留めているため軽量です。さらに最適化したい場合は requestAnimationFrame でまとめると安心です。装飾的な要素なので、読み上げソフトには関係しないよう aria-hidden を付けてもよいでしょう。

使用例・適したシーン

• LP の演出強化
• 記事の読了率向上
• ストーリーテリング表現