新着バッジ→クリックで先頭ジャンプ

<div class="d11-10-12-wrap">
          <div class="d11-10-12-frame">
            <button type="button" class="d11-10-12-pill" id="d1794Pill">2件の新着<span class="d11-10-12-arrow">↑</span></button>
            <div class="d11-10-12-scroll" id="d1794Scroll">
              <ul class="d11-10-12-list" id="d1794List">
                <li>投稿: 今週のピックアップ記事</li>
                <li>投稿: メンバー紹介インタビュー</li>
                <li>投稿: 制作の裏側を公開</li>
                <li>投稿: よくある質問まとめ</li>
                <li>投稿: 次回イベントの案内</li>
              </ul>
            </div>
          </div>
          <p class="d11-10-12-hint">▼ 下にスクロールすると新着バッジが出現</p>
        </div>

.prev.d11-10-12{align-items:flex-start;justify-content:flex-start}
        .d11-10-12-wrap{width:100%}
        .d11-10-12-frame{position:relative;height:196px;overflow:hidden;border-radius:12px;background:#f8f9fb;border:1px solid #eef0f3}
        .d11-10-12-pill{
          position:absolute;top:10px;left:50%;transform:translate(-50%,-140%);
          display:flex;align-items:center;gap:6px;border:none;
          background:#4f46e5;color:#fff;font-size:11px;font-weight:700;
          padding:7px 14px;border-radius:99px;cursor:pointer;z-index:3;
          box-shadow:0 8px 18px rgba(79,70,229,.35);
          transition:transform .3s ease;
        }
        .d11-10-12-pill.show11-10-12{transform:translate(-50%,0);}
        .d11-10-12-arrow{font-size:11px;}
        .d11-10-12-scroll{height:100%;overflow-y:auto;background:#f8f9fb;padding:8px}
        .d11-10-12-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
        .d11-10-12-list li{background:#fff;border:1px solid #eef0f3;border-radius:8px;padding:9px 11px;font-size:11.5px;color:#374151}
        .d11-10-12-list li.is-new11-10-12{background:#eef2ff;border-color:#c7d2fe;color:#3730a3;font-weight:700}
        .d11-10-12-hint{margin:8px 0 0;font-size:10.5px;color:#9ca3af;text-align:center}

(function(){
        var root=document.currentScript.closest('.item').querySelector('.d11-10-12');
        var scroll=root.querySelector('#d1794Scroll');
        var list=root.querySelector('#d1794List');
        var pill=root.querySelector('#d1794Pill');
        var topics=['投稿: 新しいお知らせがあります','投稿: 追加のレポートを公開','投稿: 更新情報をお届けします'];
        var pending=[];
        var shown=false;
        function updatePillLabel(){
          pill.childNodes[0].nodeValue=pending.length+'件の新着';
        }
        scroll.addEventListener('scroll',function(){
          if(scroll.scrollTop>20&&pending.length>0&&!shown){
            shown=true;
            pill.classList.add('show11-10-12');
          }
        });
        setInterval(function(){
          if(pending.length>=3)return;
          pending.push(topics[pending.length%topics.length]);
          updatePillLabel();
          if(scroll.scrollTop>20&&!shown){
            shown=true;
            pill.classList.add('show11-10-12');
          }
        },2600);
        pill.addEventListener('click',function(){
          pending.forEach(function(t){
            var li=document.createElement('li');
            li.className='is-new11-10-12';
            li.textContent=t;
            list.insertBefore(li,list.firstChild);
          });
          pending=[];
          shown=false;
          pill.classList.remove('show11-10-12');
          scroll.scrollTo({top:0,behavior:'smooth'});
        });
      })();