AIでページ内リンクをスムーススクロールにする【CSS＋JS生成】

目次リンクをクリックした際にピョンと飛ぶのではなく、なめらかにスクロールするUI。固定ヘッダーがある場合のオフセット調整もAIに任せられます。

方法①：既存のHTMLからCSS・JSを生成する

AIへのプロンプト例

以下の目次HTMLに対して、リンクをクリックすると対象セクションへ
スムーススクロールするJavaScriptを書いてください。
固定ヘッダーの高さが80pxあるため、80px分上にオフセットしてください。

<nav class="toc">
  <ul>
    <li><a href="#section1">セクション1</a></li>
    <li><a href="#section2">セクション2</a></li>
    <li><a href="#section3">セクション3</a></li>
  </ul>
</nav>

生成されたCSS例

html {
  scroll-behavior: smooth;
}
/* ターゲットセクションに余白を追加する方法 */
:target {
  scroll-margin-top: 88px; /* ヘッダー高さ+余白 */
}

生成されたJS例

document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', e => {
    const targetId = link.getAttribute('href');
    if (targetId === '#') return;
    const target = document.querySelector(targetId);
    if (!target) return;

    e.preventDefault();
    const headerH = 80; // 固定ヘッダーの高さ
    const top = target.getBoundingClientRect().top + window.scrollY - headerH;
    window.scrollTo({ top, behavior: 'smooth' });
  });
});

方法②：HTMLとセットで生成する

AIへのプロンプト例

固定ヘッダー（高さ72px）＋目次つきのページをHTML・CSS・JavaScriptで作ってください。
目次のリンクをクリックすると、固定ヘッダーに隠れずになめらかにスクロールする実装で。
現在表示中のセクションに対応する目次項目をハイライトする機能も追加してください。

ポイント

• CSSだけならscroll-behavior: smoothをhtmlに指定するだけで動きます（ただしオフセット調整が必要な場合はJSが必要）
• ヘッダー高さが可変の場合は「ヘッダーの実際の高さを動的に取得して」とAIに伝えましょう