ScrollHintで何ができるのか
ScrollHint は 「スクロール位置をトリガーにページの状態を切り替える」 ための JavaScript ライブラリです。
よくある課題を解決
- 今どこを読んでいるのか分からない
- CTA をずっと同じ文言で出している
- ナビの active 切り替えが面倒
導入のメリット
- 📌 目次が自動でハイライトされる
- 🔁 セクションごとに CTA が切り替わる
- 🧭 ヘッダーナビが今の位置を示す
- 🧱 HTML構造はそのまま
動作デモ
実際にスクロールして動作を確認してください。
- ✓ 左の目次がハイライトされます（デスクトップ）
- ✓ 上のナビも自動で切り替わります
- ✓ 右下のCTAがセクションで変わります
基本的な使い方（3ステップ）
① JS を読み込む
<script src="scrollhint.js" defer></script>② セクションに class を付ける
<section id="demo" class="js-section">③ 初期化する
scrollhint({
offset: 64,
sections: ".js-section",
bindTOC: true,
tocSelector: ".toc"
});WordPress への組み込み
functions.php
wp_enqueue_script(
'scrollhint',
get_template_directory_uri().'/scrollhint.js',
[],
'1.0',
true
);Gutenberg / Elementor
- セクションに class を指定するだけ
- HTML構造は変更不要
よくある失敗と対処
動かない
offset 未指定
ズレる
画像遅延 → refreshNow()
本番だけ壊れる
GTM 再計測
instance.refreshNow();制作・開発について
ScrollHint は 門王（monou.jp） が制作しています。
開発依頼を受け付けています
- LP / 記事用 JavaScript
- WordPress カスタム実装
- 既存サイトの後付け改修
- CSP / 広告計測対応