スクロール進捗バー
ページをどこまで読んだかを、画面上部の細いバーで示す「スクロール進捗バー」です。記事やドキュメントの読了感を伝えるのに役立ちます。仕組みは、 scrollTop （現在のスクロール量）を、ページ全体の高さから表示領域を引いた値で割って割合を求め、その百分率をバーの width に反映するだけ。
解説
ページをどこまで読んだかを、画面上部の細いバーで示す「スクロール進捗バー」です。記事やドキュメントの読了感を伝えるのに役立ちます。仕組みは、scrollTop（現在のスクロール量）を、ページ全体の高さから表示領域を引いた値で割って割合を求め、その百分率をバーの width に反映するだけ。バーは position:fixed で常に最上部に固定し、グラデーションで彩りを付けています。
使う場面
- 長文の記事やブログの読了インジケーター
- 利用規約やマニュアルなど長いページ
- 縦に長いランディングページの進行表示
色はグラデーションの2色（#6366f1 と #10b981）、太さは height を変えるだけで調整できます。動きを滑らかにする transition:width .1s も入っています。注意点として、スクロールイベントは頻発するため、計算が重い処理を中で行うと負荷になります。この実装は割り算1つで軽量ですが、さらに最適化するなら requestAnimationFrame でまとめる手もあります。装飾的な要素なので、内容理解に必須の情報はバーに頼らないようにしましょう。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
バーの色や太さを変えるには？
色はCSSのlinear-gradientに指定した2色、太さはheightの値を書き換えます。サイトのアクセントカラーに合わせると統一感が出ます。
進捗が最後まで100パーセントになりません。
計算は、スクロール量をページ全高から表示領域の高さを引いた値で割っています。一番下まで到達すれば100に達するはずです。届かない場合は、ページ末尾の余白やfooterの高さ、固定要素の影響を確認してください。