記事読了プログレスバー（上部固定）

解説

記事読了プログレスバーは、ページ上部に細い帯を固定し、スクロール量に応じて左から右へ伸びていく進捗インジケーターです。JavaScript で scroll イベントを監視し、scrollTop をページ全体のスクロール可能量で割って割合を計算し、その値をバーの width に反映しています。バーには transition:width .12s linear が効いているため、スクロールに合わせて滑らかに伸縮します。

使う場面

• 長文のブログ記事やコラムで、読者に残りの分量を伝えて読了を促したいとき
• 利用規約やマニュアルなど、最後まで読んでほしいページの体験を整えたいとき
• 縦に長い1カラムのコンテンツで読み進めた手応えを可視化したいとき

バーの色はグラデーション部分を差し替えるだけで雰囲気を変えられます。注意点として、scroll イベントは高頻度で発火するため、重い処理を中に書くと描画が重くなります。本実装は width の更新のみで軽量です。計算結果は Math.min(100, pct) で 100% を超えないよう抑えてあります。