Web BENTO JS
カテゴリ一覧
スクロールUI

07 / SCROLL 12 パーツ

スクロール連動UIのJS実装 12選

Q: コピーしたコードはそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされ、ページに貼り付けるだけでページ全体（window）のスクロールに連動して動きます。ライブラリの読み込みは一切不要です。

Q: デモは小さな枠の中で動いていますが、コードと同じものですか？

同一です。デモは data-target 属性でスクロール元をミニ枠（コンテナ）に切り替えているだけで、JS本体は1文字も変えていません。data-target を省略すればそのままページ全体基準で動作します。

Q: スクロールイベントでページが重くなりませんか？

スクロールイベントを使うサンプルでは addEventListener に passive: true を指定してスクロールを妨げず、requestAnimationFrame で更新処理を描画1回につき1回に間引いています。更新するのも width や transform など軽いプロパティだけなので、スマホでもなめらかに動きます。

Q: IntersectionObserver は使わないのですか？

目次ハイライトのような「見えたかどうか」の判定は IntersectionObserver でも実装できます。一方、進捗バーやスクロール率のような連続的な値はスクロール位置そのものが必要なため、scroll イベントを使っています。用途に応じて使い分けてください。

Q: このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「トップへ戻るボタン」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

コピペで動くスクロール連動UIのサンプル集です。プレビューはミニスクロール枠を実際にスクロールして試せます。HTML / CSS / JS タブでコードを確認し、全部コピーを押せば1回の貼り付けで完成します。すべて依存ライブラリなしのバニラJSで、data-bnto-* 属性による自動初期化式です。scrollリスナーは passive: true + requestAnimationFrame で軽量です。

該当するパーツが見つかりませんでした。

↓ この枠内をスクロール

読み進めた量が上部のバーにリアルタイムで反映されます。ブログや長文記事の「読了率」表示の定番パーツです。

あとどれくらいで読み終わるかがひと目で分かるため、離脱防止にも効果があると言われています。

バーの色は --c1、太さは --h で自由に変更できます。

— 完 —

読了プログレスバー

<!-- bodyの直下などに1つ設置（data-target="#box" で特定ボックス連動も可） -->
<div class="bnto-sprog" data-bnto-sprog>
  <i class="bar"></i>
</div>

.bnto-sprog {
  --c1: hsl(345 80% 55%);  /* バーの色 */
  --h: 5px;                /* バーの太さ */
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--h); z-index: 9999;
  background: rgba(0,0,0,.08);
  pointer-events: none;
}
.bnto-sprog .bar {
  display: block; width: 0; height: 100%;
  border-radius: 0 99px 99px 0;
  background: var(--c1);
}

// 読了プログレスバー：スクロール量に応じてバー幅を更新
// data-target="#id" を付けるとその要素内のスクロールに連動（省略時はページ全体）
(function () {
  document.querySelectorAll('[data-bnto-sprog]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    var sc = el.dataset.target ? document.querySelector(el.dataset.target) : null;
    var bar = el.querySelector('.bar');
    var ticking = false;
    function update() {
      ticking = false;
      var box = sc || document.documentElement;
      var max = box.scrollHeight - box.clientHeight;
      var y = sc ? sc.scrollTop : window.scrollY;
      bar.style.width = (max > 0 ? Math.min(100, y / max * 100) : 0) + '%';
    }
    (sc || window).addEventListener('scroll', function () {
      if (!ticking) { ticking = true; requestAnimationFrame(update); }
    }, { passive: true });
    update();
  });
})();

使い方のコツ

固定ヘッダーがあるサイトでは top: 0 をヘッダーの高さに変えると重なりを防げます。pointer-events: none を付けているので、バーの下の要素のクリックを邪魔しません。

↓ この枠内をスクロール

少しスクロールすると、右下にボタンがふわっと出現します。

クリック（タップ）すると、なめらかに一番上まで戻ります。

長いページの定番。出現のしきい値は data-show 属性で調整できます。

— 完 —

トップへ戻るボタン

<!-- data-show：出現するスクロール量(px) -->
<button type="button" class="bnto-totop" data-bnto-totop data-show="300" aria-label="ページ上部へ戻る">
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
</button>

.bnto-totop {
  --c1: hsl(202 73% 50%);  /* ボタン色 */
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: var(--c1); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
  /* 非表示状態（出現時にふわっと上がる） */
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.bnto-totop.is-show {
  opacity: 1; visibility: visible; transform: none;
}

// トップへ戻る：data-show(px) を超えたら表示、クリックでスムース上昇
// data-target="#id" を付けるとその要素内のスクロールに連動（省略時はページ全体）
(function () {
  document.querySelectorAll('[data-bnto-totop]').forEach(function (btn) {
    if (btn.dataset.bntoInit) return;
    btn.dataset.bntoInit = '1';
    var sc = btn.dataset.target ? document.querySelector(btn.dataset.target) : null;
    var show = parseInt(btn.dataset.show || '300', 10);
    var ticking = false;
    function update() {
      ticking = false;
      var y = sc ? sc.scrollTop : window.scrollY;
      btn.classList.toggle('is-show', y > show);
    }
    btn.addEventListener('click', function () {
      (sc || window).scrollTo({ top: 0, behavior: 'smooth' });
    });
    (sc || window).addEventListener('scroll', function () {
      if (!ticking) { ticking = true; requestAnimationFrame(update); }
    }, { passive: true });
    update();
  });
})();

使い方のコツ

デモは data-show="60"、実ページでは 300 前後（1画面弱）がおすすめです。visibility も切り替えているので、非表示中に誤タップされる心配がありません。

↓ この枠内をスクロール

下にスクロールするとヘッダーがコンパクトに縮み、コンテンツの表示領域が広がります。

一番上まで戻ると、元の大きさにふわっと戻ります。

ロゴのサイズと上下の余白をCSSのtransitionで変化させています。

— 完 —

SITE LOGO MENU

スクロールで縮むヘッダー

<!-- data-at：縮み始めるスクロール量(px)。固定ヘッダーの高さぶん body に padding-top を -->
<header class="bnto-shrinkhead" data-bnto-shrinkhead data-at="80">
  <span class="lg">SITE LOGO</span>
  <span class="mn">MENU</span>
</header>

.bnto-shrinkhead {
  --c1: hsl(26 90% 55%);  /* ロゴ色 */
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  padding: 18px 20px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  transition: padding .3s;
}
.bnto-shrinkhead .lg {
  font-weight: 900; font-size: 16px;
  color: var(--c1); transition: font-size .3s;
}
.bnto-shrinkhead .mn { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
/* スクロールで縮んだ状態 */
.bnto-shrinkhead.is-small { padding: 8px 20px; }
.bnto-shrinkhead.is-small .lg { font-size: 13px; }

// 縮むヘッダー：data-at(px) を超えたら is-small を付与、戻ると解除
// data-target="#id" を付けるとその要素内のスクロールに連動（省略時はページ全体）
(function () {
  document.querySelectorAll('[data-bnto-shrinkhead]').forEach(function (head) {
    if (head.dataset.bntoInit) return;
    head.dataset.bntoInit = '1';
    var sc = head.dataset.target ? document.querySelector(head.dataset.target) : null;
    var at = parseInt(head.dataset.at || '80', 10);
    var ticking = false;
    function update() {
      ticking = false;
      var y = sc ? sc.scrollTop : window.scrollY;
      head.classList.toggle('is-small', y > at);
    }
    (sc || window).addEventListener('scroll', function () {
      if (!ticking) { ticking = true; requestAnimationFrame(update); }
    }, { passive: true });
    update();
  });
})();

使い方のコツ

position: fixed のヘッダーは本文に重なるため、body { padding-top: 64px; } のように最大時の高さぶんの余白を確保してください。縮小時に背景色を半透明＋backdrop-filter: blur() にするのも人気です。

↓ 下へスクロールで隠れ、上で再表示

読み進めている間（下スクロール中）はヘッダーが引っ込み、画面を広く使えます。

少しでも上に戻すと、すぐにヘッダーが降りてきます。「メニューに戻りたい」瞬間を逃しません。

スマホサイトのヘッダーで特によく使われるパターンです。

— 完 —

SITE LOGO MENU

スクロールで隠れるヘッダー

<!-- 固定ヘッダーの高さぶん body に padding-top を確保 -->
<header class="bnto-hidehead" data-bnto-hidehead>
  <span class="lg">SITE LOGO</span>
  <span class="mn">MENU</span>
</header>

.bnto-hidehead {
  --c1: hsl(150 58% 42%);  /* ロゴ色 */
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  padding: 14px 20px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  transition: transform .35s ease;
}
.bnto-hidehead .lg { font-weight: 900; font-size: 14px; color: var(--c1); }
.bnto-hidehead .mn { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
/* 下スクロール中に隠れた状態 */
.bnto-hidehead.is-hide { transform: translateY(-110%); }

// 隠れるヘッダー：下スクロールで隠し、上スクロールで再表示
// data-target="#id" を付けるとその要素内のスクロールに連動（省略時はページ全体）
(function () {
  document.querySelectorAll('[data-bnto-hidehead]').forEach(function (head) {
    if (head.dataset.bntoInit) return;
    head.dataset.bntoInit = '1';
    var sc = head.dataset.target ? document.querySelector(head.dataset.target) : null;
    var last = 0;
    var ticking = false;
    function update() {
      ticking = false;
      var y = sc ? sc.scrollTop : window.scrollY;
      if (Math.abs(y - last) < 6) return;   // 微小な揺れは無視
      head.classList.toggle('is-hide', y > last && y > 50);
      last = y;
    }
    (sc || window).addEventListener('scroll', function () {
      if (!ticking) { ticking = true; requestAnimationFrame(update); }
    }, { passive: true });
  });
})();

使い方のコツ

判定の遊び（6px）を入れることで、スクロールの微妙な揺れでヘッダーがちらつくのを防いでいます。y > 50 は「ページ最上部付近では隠さない」ための下限です。数値はサイトに合わせて調整してOKです。

はじめに

↓ スクロールすると目次の現在地が動きます

読んでいる位置に合わせて、左の目次がハイライトされます。

使い方

目次のリンクをクリックすると、該当セクションへスムースに移動します。

まとめ

長いドキュメントやマニュアルページの定番UIです。

目次スクロールスパイ

<!-- href の先（id="sec1" など）が本文側にあればOK -->
<nav class="bnto-spy" data-bnto-spy aria-label="目次">
  <a href="#sec1">はじめに</a>
  <a href="#sec2">使い方</a>
  <a href="#sec3">まとめ</a>
</nav>

<!-- 本文側（見出しに id を振る） -->
<h2 id="sec1">はじめに</h2> …
<h2 id="sec2">使い方</h2> …
<h2 id="sec3">まとめ</h2> …

.bnto-spy {
  --c1: hsl(258 47% 54%);  /* 現在地の色 */
  position: sticky; top: 20px;  /* サイドバー内で追従 */
  display: flex; flex-direction: column; gap: 2px;
}
.bnto-spy a {
  display: block; padding: 6px 10px;
  border-left: 3px solid #DFE9F1;
  font-size: 11.5px; font-weight: 800;
  color: #5A6B7A; text-decoration: none;
  transition: color .2s, border-color .2s;
}
.bnto-spy a.is-active {
  color: var(--c1); border-left-color: var(--c1);
}

// 目次スクロールスパイ：現在の見出しに対応するリンクへ is-active
// data-target="#id" を付けるとその要素内のスクロールに連動（省略時はページ全体）
(function () {
  document.querySelectorAll('[data-bnto-spy]').forEach(function (nav) {
    if (nav.dataset.bntoInit) return;
    nav.dataset.bntoInit = '1';
    var sc = nav.dataset.target ? document.querySelector(nav.dataset.target) : null;
    var links = Array.prototype.slice.call(nav.querySelectorAll('a[href^="#"]'));
    var secs = links.map(function (a) {
      return document.querySelector(a.getAttribute('href'));
    });
    var ticking = false;
    function update() {
      ticking = false;
      var base = sc ? sc.getBoundingClientRect().top : 0;
      var cur = 0;
      secs.forEach(function (sec, i) {
        if (sec && sec.getBoundingClientRect().top - base <= 60) cur = i;
      });
      links.forEach(function (a, i) { a.classList.toggle('is-active', i === cur); });
    }
    links.forEach(function (a, i) {
      a.addEventListener('click', function (e) {
        if (!secs[i]) return;
        e.preventDefault();
        var top = secs[i].getBoundingClientRect().top +
          (sc ? sc.scrollTop - sc.getBoundingClientRect().top : window.scrollY) - 8;
        (sc || window).scrollTo({ top: top, behavior: 'smooth' });
      });
    });
    (sc || window).addEventListener('scroll', function () {
      if (!ticking) { ticking = true; requestAnimationFrame(update); }
    }, { passive: true });
    update();
  });
})();

使い方のコツ

判定オフセットの 60 は「固定ヘッダーの高さ＋少し」に合わせるとズレません。2カラムレイアウトのサイド目次に置き、position: sticky で追従させるのが定番の使い方です。

セクション 1

↓ 右端のドットが現在地を示します

スクロールに合わせて、対応するドットが点灯します。

セクション 2

ドットをクリックすると、そのセクションへスムースに移動できます。

セクション 3

1画面ずつ見せる縦長LPと相性抜群のナビゲーションです。

セクション進捗ドット

<!-- href の先（id="sec1" など）＝各セクション。ドットは自動でハイライト -->
<nav class="bnto-sdots" data-bnto-sdots aria-label="セクション移動">
  <a href="#sec1" aria-label="セクション1"></a>
  <a href="#sec2" aria-label="セクション2"></a>
  <a href="#sec3" aria-label="セクション3"></a>
</nav>

.bnto-sdots {
  --c1: hsl(187 63% 42%);  /* 現在地ドットの色 */
  position: fixed; right: 16px; top: 50%;
  transform: translateY(-50%); z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
}
.bnto-sdots a {
  width: 10px; height: 10px; border-radius: 50%;
  background: #D9D2C2;
  transition: background .25s, transform .25s;
}
.bnto-sdots a.is-active {
  background: var(--c1); transform: scale(1.4);
}

// セクション進捗ドット：現在セクションのドットを点灯、クリックで移動
// data-target="#id" を付けるとその要素内のスクロールに連動（省略時はページ全体）
(function () {
  document.querySelectorAll('[data-bnto-sdots]').forEach(function (nav) {
    if (nav.dataset.bntoInit) return;
    nav.dataset.bntoInit = '1';
    var sc = nav.dataset.target ? document.querySelector(nav.dataset.target) : null;
    var links = Array.prototype.slice.call(nav.querySelectorAll('a[href^="#"]'));
    var secs = links.map(function (a) {
      return document.querySelector(a.getAttribute('href'));
    });
    var ticking = false;
    function update() {
      ticking = false;
      var base = sc ? sc.getBoundingClientRect().top : 0;
      var cur = 0;
      secs.forEach(function (sec, i) {
        if (sec && sec.getBoundingClientRect().top - base <= 60) cur = i;
      });
      links.forEach(function (a, i) { a.classList.toggle('is-active', i === cur); });
    }
    links.forEach(function (a, i) {
      a.addEventListener('click', function (e) {
        if (!secs[i]) return;
        e.preventDefault();
        var top = secs[i].getBoundingClientRect().top +
          (sc ? sc.scrollTop - sc.getBoundingClientRect().top : window.scrollY) - 8;
        (sc || window).scrollTo({ top: top, behavior: 'smooth' });
      });
    });
    (sc || window).addEventListener('scroll', function () {
      if (!ticking) { ticking = true; requestAnimationFrame(update); }
    }, { passive: true });
    update();
  });
})();

使い方のコツ

ドットは中身が空のリンクなので、aria-label でセクション名を必ず伝えましょう。目次スパイと同じ仕組みなので、ドットの代わりに短いラベル付きにするアレンジも簡単です。

↓ この枠内をスクロール

少し読み進めたタイミングで、下からCTAバーがスライドインします。

「興味を持ち始めた頃に申し込み導線を出す」動きで、コンバージョン施策の定番です。

ボタンの文言は「今すぐ試す」「無料で始める」など、行動がイメージできる言葉が効果的です。

出しっぱなしにせず、フッター付近では消す設計にすると邪魔になりません。

一番上まで戻ると、CTAはまた引っ込みます。

— 完 —

初回限定 20%OFF！

下部固定CTA

<!-- data-show：出現するスクロール量(px) -->
<div class="bnto-scta" data-bnto-scta data-show="300">
  <span class="tx">初回限定 20%OFF！</span>
  <button type="button" class="bt">詳しく見る</button>
</div>

.bnto-scta {
  --c1: hsl(4 85% 58%);  /* ボタン色 */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 12px 16px;
  background: #fff;
  box-shadow: 0 -6px 20px rgba(0,0,0,.12);
  /* 待機中は画面外に隠しておく */
  transform: translateY(110%);
  transition: transform .35s ease;
}
.bnto-scta .tx { font-size: 12px; font-weight: 800; }
.bnto-scta .bt {
  flex: none; padding: 8px 18px;
  border: none; border-radius: 99px;
  background: var(--c1); color: #fff;
  font: inherit; font-weight: 800; font-size: 11.5px;
  cursor: pointer;
}
.bnto-scta.is-show { transform: none; }

// 下部固定CTA：data-show(px) を超えたら下からスライドイン
// data-target="#id" を付けるとその要素内のスクロールに連動（省略時はページ全体）
(function () {
  document.querySelectorAll('[data-bnto-scta]').forEach(function (cta) {
    if (cta.dataset.bntoInit) return;
    cta.dataset.bntoInit = '1';
    var sc = cta.dataset.target ? document.querySelector(cta.dataset.target) : null;
    var show = parseInt(cta.dataset.show || '300', 10);
    var ticking = false;
    function update() {
      ticking = false;
      var y = sc ? sc.scrollTop : window.scrollY;
      cta.classList.toggle('is-show', y > show);
    }
    (sc || window).addEventListener('scroll', function () {
      if (!ticking) { ticking = true; requestAnimationFrame(update); }
    }, { passive: true });
    update();
  });
})();

使い方のコツ

CTAがフッターのリンクなどを隠さないよう、body { padding-bottom: 70px; } の確保を忘れないでください。×ボタンを付けて cta.remove() する「閉じられるCTA」へのアレンジも簡単です。

↓ この枠内をスクロール

右下の円形ゲージに、スクロール率が%数字とリングで表示されます。

進捗バー（横棒）より省スペースで、デザインのアクセントにもなります。

SVGの pathLength="100" を使うと、%の値をそのまま描画に使えて計算いらずです。

— 完 —

スクロール率ゲージ

<!-- pathLength="100" ＝ 円周を100として扱える（%がそのまま使える） -->
<div class="bnto-spct" data-bnto-spct>
  <svg viewBox="0 0 36 36" aria-hidden="true">
    <circle class="tr" cx="18" cy="18" r="16" pathLength="100"/>
    <circle class="pg" cx="18" cy="18" r="16" pathLength="100"/>
  </svg>
  <b class="pc">0%</b>
</div>

.bnto-spct {
  --c1: hsl(230 60% 55%);  /* ゲージ色 */
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  width: 52px; height: 52px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.bnto-spct svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);  /* 12時の位置から始める */
}
.bnto-spct circle { fill: none; stroke-width: 3.5; }
.bnto-spct .tr { stroke: #DFE9F1; }
.bnto-spct .pg {
  stroke: var(--c1); stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.bnto-spct .pc {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 900;
}

// スクロール率：%数字と円形ゲージを更新（pathLength=100 なので%がそのまま使える）
// data-target="#id" を付けるとその要素内のスクロールに連動（省略時はページ全体）
(function () {
  document.querySelectorAll('[data-bnto-spct]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    var sc = el.dataset.target ? document.querySelector(el.dataset.target) : null;
    var ring = el.querySelector('.pg');
    var num = el.querySelector('.pc');
    var ticking = false;
    function update() {
      ticking = false;
      var box = sc || document.documentElement;
      var max = box.scrollHeight - box.clientHeight;
      var y = sc ? sc.scrollTop : window.scrollY;
      var p = max > 0 ? Math.round(Math.min(100, Math.max(0, y / max * 100))) : 0;
      ring.style.strokeDashoffset = 100 - p;
      num.textContent = p + '%';
    }
    (sc || window).addEventListener('scroll', function () {
      if (!ticking) { ticking = true; requestAnimationFrame(update); }
    }, { passive: true });
    update();
  });
})();

使い方のコツ

「トップへ戻るボタン」と合体させて、ゲージ付き戻るボタンにするのが人気のアレンジです。100%になったら色を変える・チェックマークを出すなどの演出も、p === 100 の分岐を足すだけで作れます。

↓ この枠内をスクロール

最上部にいる間だけ、下部で「SCROLL ↓」が明滅して下への誘導を促します。

少しスクロールするとフェードアウトし、一番上まで戻ると再び表示されます。

ファーストビューが1枚絵のヒーローで「この下にコンテンツがある」ことを伝える定番パーツです。

— 完 —

スクロールダウン誘導

<!-- ヒーロー下部などに1つ設置（data-hide：消えるスクロール量px） -->
<div class="bnto-sdown" data-bnto-sdown data-hide="80" aria-hidden="true">
  <span class="tx">SCROLL</span>
  <svg class="ar" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</div>

.bnto-sdown {
  --c1: hsl(292 55% 52%);  /* 文字と矢印の色 */
  position: fixed; left: 50%; bottom: 22px; z-index: 9999;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--c1);
  font-size: 10px; font-weight: 900; letter-spacing: .22em;
  pointer-events: none;
  transition: opacity .4s, visibility .4s;
}
/* 文字は明滅、矢印は上下にゆらす */
.bnto-sdown .tx { animation: bnto-sdown-blink 1.6s ease-in-out infinite; }
.bnto-sdown .ar { animation: bnto-sdown-bob 1.6s ease-in-out infinite; }
/* スクロール後に消えた状態 */
.bnto-sdown.is-hide { opacity: 0; visibility: hidden; }
@keyframes bnto-sdown-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes bnto-sdown-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
/* 動きを減らす設定のユーザーには明滅させない */
@media (prefers-reduced-motion: reduce) {
  .bnto-sdown .tx, .bnto-sdown .ar { animation: none; }
}

// スクロールダウン誘導：data-hide(px) を超えたら消し、最上部に戻ると再表示
// data-target="#id" を付けるとその要素内のスクロールに連動（省略時はページ全体）
(function () {
  document.querySelectorAll('[data-bnto-sdown]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    var sc = el.dataset.target ? document.querySelector(el.dataset.target) : null;
    var hide = parseInt(el.dataset.hide || '80', 10);
    var ticking = false;
    function update() {
      ticking = false;
      var y = sc ? sc.scrollTop : window.scrollY;
      el.classList.toggle('is-hide', y > hide);
    }
    (sc || window).addEventListener('scroll', function () {
      if (!ticking) { ticking = true; requestAnimationFrame(update); }
    }, { passive: true });
    update();
  });
})();

使い方のコツ

画面全体ではなくヒーローセクション内の下端に出したいときは、親に position: relative を指定して position: fixed を absolute に変えてください。pointer-events: none なので下の要素のクリックを邪魔せず、装飾扱いのため aria-hidden="true" を付けています。data-hide はファーストビュー高さの1〜2割（80〜150px）程度が目安です。

↓ この枠内をスクロール

記事 1：無限スクロールのデモです
記事 2：下へ進むと自動で増えます
記事 3：読み込みはもう少し先です
記事 4：さらにスクロール…

↓ さらにスクロール

無限スクロール

<!-- data-max：自動追加の上限件数。末尾の .more（番兵）が見えるたびに追加 -->
<div class="bnto-infscroll" data-bnto-infinitescroll data-max="30">
  <ul class="list">
    <li>記事 1</li>
    <li>記事 2</li>
    <li>記事 3</li>
    <li>記事 4</li>
  </ul>
  <p class="more" role="status">読み込み中…</p>
</div>

.bnto-infscroll {
  --c1: hsl(215 72% 50%);  /* アクセント色 */
}
.bnto-infscroll .list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.bnto-infscroll .list li {
  padding: 9px 11px;
  background: #fff; border: 2px solid #DFE9F1;
  border-left: 4px solid var(--c1);
  border-radius: 10px;
  font-size: 11.5px; font-weight: 700;
}
/* 番兵（これが見えたら追加読み込み） */
.bnto-infscroll .more {
  margin: 12px 0 0; text-align: center;
  font-size: 11px; font-weight: 800; color: var(--c1);
}
/* 上限まで読み込んだあとの「終わり」表示 */
.bnto-infscroll .more.is-end { color: #1D2A36; }

(function () {
  document.querySelectorAll('[data-bnto-infinitescroll]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    // data-target="#id" でその要素内スクロールを監視（省略時はページ全体）
    var sc = box.dataset.target ? document.querySelector(box.dataset.target) : null;
    var list = box.querySelector('.list');
    var more = box.querySelector('.more');
    var max = parseInt(box.dataset.max || '30', 10);
    var count = list.children.length;
    var loading = false;
    // 読み込み中の表示 → 少し待って項目を追加（実際はfetchに置き換え）
    function load() {
      loading = true;
      more.classList.add('is-loading');
      more.textContent = '読み込み中…';
      setTimeout(function () {
        for (var i = 0; i < 3 && count < max; i++) {
          count++;
          var li = document.createElement('li');
          li.textContent = '記事 ' + count + '：スクロールで自動追加されました';
          list.appendChild(li);
        }
        loading = false;
        more.classList.remove('is-loading');
        if (count >= max) {
          io.unobserve(more);
          more.classList.add('is-end');
          more.textContent = '— すべて読み込みました —';
        } else {
          more.textContent = '↓ さらにスクロール';
        }
      }, 500);
    }
    // 番兵（.more）が見えたら、重複読み込みを防ぎつつ次を読み込む
    var io = new IntersectionObserver(function (entries) {
      if (entries[0].isIntersecting && !loading && count < max) load();
    }, { root: sc, rootMargin: '0px 0px 40px 0px' });
    io.observe(more);
  });
})();

使い方のコツ

監視するのは番兵1要素だけなので、scrollイベント方式より軽量です。実運用では「3件のダミー追加」の部分を fetch() での記事取得に置き換えてください。追加しすぎるとDOMが重くなるため、data-max の上限を設けるか、ある程度で「もっと見る」ボタンに切り替える設計がおすすめです。

↓ 半分ほど読むとカードが出ます

記事を読み進めたユーザーにだけ「次のおすすめ」を提案するパーツです。

読了率が data-at（%）を超えると、右下からカードがスライドインします。

×で閉じると、それ以降は再表示されません。

— 完 —

NEXT 次のおすすめ：スクロール連動UIの作り方

次記事スライドイン

<!-- data-at：カードが出る読了率(%)。リンク先は次に読んでほしい記事へ -->
<div class="bnto-nextcard" data-bnto-nextcard data-at="50">
  <span class="tag">NEXT</span>
  <a class="tt" href="next-article.html">次のおすすめ：記事タイトル</a>
  <button type="button" class="cl" aria-label="閉じる">×</button>
</div>

.bnto-nextcard {
  --c1: hsl(338 72% 52%);  /* タグの色 */
  position: fixed; right: 16px; bottom: 16px; z-index: 9999;
  width: 230px; padding: 12px 14px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  /* 待機中は画面右の外に隠しておく */
  transform: translateX(calc(100% + 24px));
  transition: transform .4s ease;
}
.bnto-nextcard.is-show { transform: none; }
.bnto-nextcard .tag {
  display: block;
  font-size: 9.5px; font-weight: 900;
  letter-spacing: .14em; color: var(--c1);
}
.bnto-nextcard .tt {
  display: block; margin-top: 3px;
  font-size: 12px; font-weight: 800; line-height: 1.5;
  color: #1D2A36; text-decoration: none;
}
/* 閉じるボタン */
.bnto-nextcard .cl {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: #EEF4F9; color: #5A6B7A;
  font: inherit; font-size: 12px; line-height: 1;
  cursor: pointer;
}

// 次記事スライドイン：読了率が data-at(%) を超えたら表示。×で閉じたら再表示しない
// data-target="#id" を付けるとその要素内のスクロールに連動（省略時はページ全体）
(function () {
  document.querySelectorAll('[data-bnto-nextcard]').forEach(function (card) {
    if (card.dataset.bntoInit) return;
    card.dataset.bntoInit = '1';
    var sc = card.dataset.target ? document.querySelector(card.dataset.target) : null;
    var at = parseInt(card.dataset.at || '50', 10);
    var closed = false;
    var ticking = false;
    function update() {
      ticking = false;
      if (closed) return;
      var box = sc || document.documentElement;
      var max = box.scrollHeight - box.clientHeight;
      var y = sc ? sc.scrollTop : window.scrollY;
      card.classList.toggle('is-show', max > 0 && y / max * 100 >= at);
    }
    card.querySelector('.cl').addEventListener('click', function () {
      closed = true;
      card.classList.remove('is-show');
    });
    (sc || window).addEventListener('scroll', function () {
      if (!ticking) { ticking = true; requestAnimationFrame(update); }
    }, { passive: true });
    update();
  });
})();

使い方のコツ

data-at は50〜70%（記事に興味を持ったと判断できるあたり）が目安です。×で閉じた状態はページ内の変数で保持しているためリロードで戻ります。「1日出さない」等にしたい場合は closed の代わりに localStorage を使うアレンジで対応できます。

↓ この枠内をスクロール

ここはまだ範囲外です。下のセクションに入るとCTAが追従を始めます。

対象セクション

この範囲の間だけ、右のCTAがスクロールについてきます。

範囲の終わりに近づくと…

CTAは下端で止まり、それ以上はついてきません。

ご相談は無料です

範囲を出ました。CTAは範囲内に置いたままになります。

— 完 —

範囲内追従サイドCTA

<!-- 追従させたい範囲（親要素）に position: relative とCTAぶんの余白を確保 -->
<!-- 範囲を別要素にしたいときは data-range="#id" で指定 -->
<section style="position: relative; padding-right: 110px;">
  <h2>料金プラン</h2>
  <p>…このセクションの間だけ右のCTAが追従します…</p>
  <div class="bnto-rangesticky" data-bnto-rangesticky data-offset="16">
    ご相談は無料です
    <button type="button" class="bt">申し込む</button>
  </div>
</section>

.bnto-rangesticky {
  --c1: hsl(160 60% 38%);  /* CTAの色 */
  position: absolute; top: 0; right: 0;
  width: 96px; padding: 10px 8px;
  background: var(--c1); color: #fff;
  border-radius: 12px;
  text-align: center;
  font-size: 10.5px; font-weight: 800; line-height: 1.5;
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
}
.bnto-rangesticky .bt {
  margin-top: 7px;
  display: block; width: 100%; padding: 6px 0;
  border: none; border-radius: 99px;
  background: #fff; color: var(--c1);
  font: inherit; font-weight: 800; font-size: 10px;
  cursor: pointer;
}

// 範囲内追従サイドCTA：親要素（または data-range の要素）の範囲内でだけ追従
// data-target="#id" を付けるとその要素内のスクロールに連動（省略時はページ全体）
(function () {
  document.querySelectorAll('[data-bnto-rangesticky]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    var sc = el.dataset.target ? document.querySelector(el.dataset.target) : null;
    var area = el.dataset.range ? document.querySelector(el.dataset.range) : el.parentElement;
    var off = parseInt(el.dataset.offset || '16', 10);
    var ticking = false;
    function update() {
      ticking = false;
      var base = sc ? sc.getBoundingClientRect().top : 0;
      var rect = area.getBoundingClientRect();
      var top = rect.top - base;
      var limit = rect.height - el.offsetHeight;
      var shift = Math.min(Math.max(off - top, 0), Math.max(limit, 0));
      el.style.transform = 'translateY(' + shift + 'px)';
    }
    (sc || window).addEventListener('scroll', function () {
      if (!ticking) { ticking = true; requestAnimationFrame(update); }
    }, { passive: true });
    update();
  });
})();

使い方のコツ

親要素に position: relative と、CTAの幅ぶんの余白（padding-right）が必要です。data-offset は追従中の上端からの距離です。単純な縦追従だけならCSSの position: sticky でも実現できますが、この方式はJSなのでミニ枠内デモや「追従開始をずらす」等の細かい制御がしやすいのが利点です。

スクロール連動UIの基礎知識

スクロール連動UIは、ページのスクロール位置に合わせて「今どこにいるか」「あとどれくらいか」をユーザーに返すためのパーツ群です。読了プログレスバー・目次ハイライト・トップへ戻るボタンなどはどれも、長いページの迷子を防ぐ定番装置です。このページのサンプルはすべて依存ライブラリなしのバニラJavaScriptで、jQueryもフレームワークも不要です。

使い方は、HTML / CSS / JSの3タブをそれぞれ貼り付けるか、「全部コピー」ボタンでひとまとめのコードを1回貼り付けるだけです。初期化は data-bnto-* 属性の自動検出式なので、複数設置しても二重にコードを貼っても壊れません。デモは data-target 属性でミニ枠のスクロールに接続していますが、コードは属性を省略すればそのままページ全体（window）基準で動きます。

現在地フィードバックのUX効果

ユーザーは「終わりが見えない縦長ページ」で離脱しやすくなります。進捗バーやスクロール率ゲージは残り量を可視化して読み切りを後押しし、目次スパイやドットナビは現在地を示して回遊のストレスを減らします。隠れるヘッダーや下部CTAのような「必要な時だけ出る」UIも、画面の狭いスマホで本文への集中とアクションの両立に効きます。

passiveリスナーとrequestAnimationFrameでの負荷対策

scrollイベントは1回のスクロールで何十回も発火するため、素朴に書くとページがカクつきます。このページのサンプルは全て、addEventListener('scroll', fn, { passive: true }) でブラウザのスクロール処理をブロックしないことを宣言しつつ、requestAnimationFrame で更新を描画1回につき1回に間引きしています。さらに、変更するプロパティを transform や width などレイアウトへの影響が小さいものに限定するのがコツです。

IntersectionObserverで代替できるケース

「要素が見えたかどうか」だけが知りたい場合（目次ハイライト・セクション判定・出現アニメなど）は、IntersectionObserver を使うとscrollイベント自体が不要になり、さらに軽量です。一方、進捗バーやスクロール率のような連続値、スクロール方向の判定（隠れるヘッダー）はスクロール位置そのものが必要なので、scrollイベント＋間引きが適任です。要素の出現だけが目的ならスクロール出現カテゴリのIntersectionObserverサンプルも参考にしてください。

「全部コピー」と「分けて貼る」の使い分け

「全部コピー」を使うと、HTML・CSS・JavaScriptがひとつの自己完結ブロックとしてコピーされるので、1回の貼り付けだけですぐ動きを確認できます。動作のお試しや、1ページ完結のLPに組み込むときはこの方法が手軽です。

一方、本番サイトへ本格的に組み込む場合は、CSSはスタイルシート（.cssファイル）へ、JavaScriptは</body>直前や共通の.jsファイルへ、HTMLは使いたい場所へと分けて貼るのが一般的です。スタイルとスクリプトを1か所に集約できるため、複数ページ・複数パーツで使い回すときの管理がしやすく、ブラウザのキャッシュも効きやすくなります。なお、同じパーツをページ内で何度も使う場合でも、CSSとJSを貼るのは1回だけで大丈夫です（初期化スクリプトが該当要素すべてに自動で効きます）。

よくある質問

コピーしたコードはそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされ、ページに貼り付けるだけでページ全体（window）のスクロールに連動して動きます。ライブラリの読み込みは一切不要です。

デモは小さな枠の中で動いていますが、コードと同じものですか？

同一です。デモは data-target 属性でスクロール元をミニ枠（コンテナ）に切り替えているだけで、JS本体は1文字も変えていません。data-target を省略すればそのままページ全体基準で動作します。

スクロールイベントでページが重くなりませんか？

スクロールイベントを使うサンプルでは addEventListener に passive: true を指定してスクロールを妨げず、requestAnimationFrame で更新処理を描画1回につき1回に間引いています。更新するのも width や transform など軽いプロパティだけなので、スマホでもなめらかに動きます。

IntersectionObserver は使わないのですか？

目次ハイライトのような「見えたかどうか」の判定は IntersectionObserver でも実装できます。一方、進捗バーやスクロール率のような連続的な値はスクロール位置そのものが必要なため、scroll イベントを使っています。用途に応じて使い分けてください。

このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「トップへ戻るボタン」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

スクロール連動UIのJS実装 12選

読了プログレスバー

トップへ戻るボタン

スクロールで縮むヘッダー

スクロールで隠れるヘッダー

はじめに

使い方

まとめ

目次スクロールスパイ

セクション 1

セクション 2

セクション 3

セクション進捗ドット

下部固定CTA

スクロール率ゲージ

スクロールダウン誘導

無限スクロール

次記事スライドイン

対象セクション

範囲内追従サイドCTA

スクロール連動UIの基礎知識

現在地フィードバックのUX効果

passiveリスナーとrequestAnimationFrameでの負荷対策

IntersectionObserverで代替できるケース

「全部コピー」と「分けて貼る」の使い分け

よくある質問

関連カテゴリ