記事を読み進めるほどバーが右に伸びていく読了プログレスバー。ページ上部や記事タイトル下に設置して、読者のエンゲージメントを高める効果があります。
方法①：既存のHTMLからCSS・JSを生成する
AIへのプロンプト例
以下のHTMLに、スクロール量に応じてページ上部のプログレスバーが伸びる
CSS・JavaScriptを追加してください。
・バーはページ最上部に固定
・色はティール（#3e8685）
・高さ3px
・スクロール位置に応じてwidthが0〜100%に変化
<div id="progress-bar"></div>生成されたCSS例
#progress-bar {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0%;
background: #3e8685;
z-index: 9999;
transition: width 0.1s linear;
}生成されたJS例
const bar = document.getElementById('progress-bar');
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
bar.style.width = progress + '%';
}, { passive: true });📝 用語メモ
{ passive: true }：スクロールイベントのリスナーをパッシブモードにする設定。スクロールのパフォーマンスが向上します。document.documentElement.scrollHeight：ページ全体の高さ。window.innerHeightを引いてスクロールできる最大距離を求めます。
方法②：HTMLとセットで生成する
AIへのプロンプト例
記事ページのスクロール読了率を表示するプログレスバーを
HTML・CSS・JavaScriptで作ってください。
・ページ最上部（ヘッダー直下）に固定
・スクロールに応じてバーが左から右に伸びる
・グラデーションカラーにしてくださいポイント
- ヘッダーが固定の場合はヘッダー下に配置するために
topの値をヘッダー高さに合わせましょう - 記事コンテンツエリアだけを基準にしたい場合は「記事の
#article要素の高さを基準に計算して」と伝えます
