タイトル：UXの探求：SPA風ページネーションで画面が吹っ飛ぶ問題の解決

画面が吹っ飛ぶストレス

ブログ内に5行単位で表示されるデータテーブル（表）を作成し、JavaScriptを使って画面遷移なしで中身だけを書き換える「SPA（Single Page Application）風」のモダンなページネーションを実装しました。 しかし、ここで問題が発生。「次へ」ボタンを押して表が書き換わるたびに、画面がページの一番上まで強制的に吹っ飛んでしまい、毎回スクロールして戻らなければならないという最悪のUXになってしまいました。

原因とJavaScriptの魔法

原因は、ボタンのクリックによるブラウザの標準動作（リンク移動）と、JavaScriptが表の中身を一瞬空っぽにして書き換える際の「レイアウト崩落」による押し出しでした。 これを解決するために、以下の2つの魔法をJavaScriptにかけました。

nextBtn.addEventListener('click', (e) => {
  // 1. お節介な画面ジャンプ（標準動作）をストップ！
  e.preventDefault();

  if (currentPage < totalPages) {
    currentPage++;
    updateTable();

    // 2. 表の先頭へアニメーション付きで滑らかにスクロールさせる
    const tableElement = document.getElementById('table-area');
    if (tableElement) {
      tableElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
});

ヌルッと動く快感

e.preventDefault() で暴走を止め、書き換え直後に scrollIntoView(smooth) を発動させることで、高級車のように「ヌルッ」と表の先頭にスクロールする完璧な動作を実現できました。 単にデータが見られるだけでなく、「使っていて気持ちいい」システムを目指すフロントエンド開発の醍醐味を感じる実装でした。

（執筆協力：Gemini / 編集・監修：古老）