クリックでジャンプするミニ目次

<div class="d06-09-04-wrap">
          <nav class="d06-09-04-toc">
            <a href="#" data-t="s06-09-04-1">はじめに</a>
            <a href="#" data-t="s06-09-04-2">背景</a>
            <a href="#" data-t="s06-09-04-3">手順</a>
            <a href="#" data-t="s06-09-04-4">まとめ</a>
          </nav>
          <div class="d06-09-04-body">
            <section id="s06-09-04-1"><h4>はじめに</h4><p>上のタブをクリックすると、該当の見出しまで内部プレビューがなめらかにジャンプします。</p></section>
            <section id="s06-09-04-2"><h4>背景</h4><p>長文記事ではページ内リンクによる移動が読者の負担を大きく減らします。</p></section>
            <section id="s06-09-04-3"><h4>手順</h4><p>クリックされたリンクのターゲットIDから対象の見出し位置を計算し、スクロール位置を更新します。</p></section>
            <section id="s06-09-04-4"><h4>まとめ</h4><p>クリック一つで狙った場所へ移動できる、シンプルで実用的なジャンプ目次です。</p></section>
          </div>
        </div>

.prev.d06-09-04{padding:0;display:block}
        .d06-09-04-wrap{height:260px;display:flex;flex-direction:column}
        .d06-09-04-toc{flex:0 0 auto;display:flex;gap:6px;padding:14px 14px 10px;overflow-x:auto}
        .d06-09-04-toc a{flex:none;font-size:11px;font-weight:700;color:#5b3df0;background:#eceaff;padding:6px 12px;border-radius:16px;text-decoration:none;transition:.2s}
        .d06-09-04-toc a:hover,.d06-09-04-toc a.is-active{background:#5b3df0;color:#fff}
        .d06-09-04-body{flex:1;overflow-y:auto;padding:6px 18px 16px;scroll-behavior:smooth}
        .d06-09-04-body section{padding:8px 0 16px;border-bottom:1px dashed #eef0f5}
        .d06-09-04-body h4{margin:0 0 6px;font-size:13px;color:#242a3d}
        .d06-09-04-body p{margin:0;font-size:12px;color:#666c80;line-height:1.7}

(function(){
        var root=document.getElementById('item-06-09-04');if(!root)return;
        var body=root.querySelector('.d06-09-04-body');
        var links=root.querySelectorAll('.d06-09-04-toc a');
        links.forEach(function(a){
          a.addEventListener('click',function(e){
            e.preventDefault();
            var t=root.querySelector('#'+a.getAttribute('data-t'));
            if(t){body.scrollTop=t.offsetTop-body.offsetTop-6;}
            links.forEach(function(x){x.classList.remove('is-active');});
            a.classList.add('is-active');
          });
        });
      })();