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

解説

ページを下にスクロールするほど上部の細いバーが伸びていき、読み進めた割合を視覚化するインジケーターです。計算は単純で、JavaScript の scroll イベントで現在のスクロール量を、ページ全体の高さから画面の高さを引いた値で割り、百分率にしてバーの width に反映しています。バーは position:sticky で常に画面の上端に留まります。

長文の記事、利用規約、ドキュメント、ストーリー性のあるランディングページなど、読了率を意識させたいページで読者の離脱を防ぐ助けになります。残りの分量が見えることで、最後まで読むモチベーションにつながります。

実装上の注意

• スクロール監視には passive:true を付けており、スクロールの滑らかさを損ないません。
• バーの色は linear-gradient でブランドカラーに合わせて変えられます。
• 動きを抑えたい利用者のために、prefers-reduced-motion で transition を無効化する配慮を加えると親切です。

使用例・適したシーン

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