095. Scroll Resetting（スクロールのリセット制御：ジャンプするか、留まるかを選択する）

原理：ページの「高さ」が変わったときの振る舞い

予期せぬ「画面の跳ね上がり」を防ぐ

長い縦長のページで、下の方にあるボタンを押してコンテンツを読み込んだとき。急にページの一番上まで「ピュン！」とスクロールが戻ってしまったら、ユーザーは自分が何をしていたか分からなくなってしまいます。逆に、全く新しいページに切り替わったのに、前のページの「下の方」の位置が維持されてしまったら、これまた不自然です。

「スクロールのリセット制御（Scroll Resetting）」は、「画面を更新したあと、スクロール位置を一番上に戻す（リセットする）か、それとも今の位置を頑なに守る（維持する）か」を選択し、制御するための設定です。

実践：状況に合わせた「視点」の固定

1. 自動でトップに戻す（ページ遷移風）

大きなコンテンツを入れ替えたので、新しい気持ちで一番上から読んでほしい場合に指定します。

<!-- 
  scroll:top : 更新された要素の「一番上」まで強制的にスクロールさせます。
-->
<button hx-get="/api/full-page" 
        hx-target="#main-frame" 
        hx-swap="innerHTML scroll:top">
    新しいページを開く
</button>

2. 今の位置を絶対に動かさない（インライン更新）

小さなボタン（いいね！など）を押しただけで、景色を1ミリも動かしたくない場合に有効です。

<!-- 
  scroll:none :
  HTMXは通常、賢く維持しようとしますが、
  明示的に「何もしない」ことを指示して安定させます。
-->
<button hx-post="/api/like" hx-swap="none scroll:none">
    いいね！
</button>

3. ステップ・バイ・ステップ解説

意図を固める: 「このボタンを押したあと、ユーザーはどこを見ているのが一番自然かな？」
hx-swap への追記: hx-swap の値のあとに scroll:top や scroll:bottom を書き足します。
ウィンドウ全体を指定: ページ全体をTOPに戻したい時は scroll:window:top と書くテクニックもあります。

比較：デフォルトの維持 vs 明示的なリセット

デフォルト（何もしない）

挙動: HTMXは「今のスクロール位置（画面の座標）」をできる限り守ろうとします。
用途: ほとんどの「部分更新」に適しています。

明示的なリセット (scroll:top)

挙動: 画面がどこにあろうと、指定した位置まで「無理やり」連れて行きます。
用途: 明らかに別のコンテンツに切り替わった時、長い情報の読み込みが終わった時。

まとめ：初心者のための「景色」の守り方

スクロール位置の制御は、Webアプリにおける「カメラワーク」のようなものです。

ユーザーの「現在地」を尊重する: 原則として、ユーザーがいま見ている景色を勝手に奪わないことがUXの基本です。
「window:top」を活用する: 大幅なページ内容の変更（メインコンテンツの全入れ替えなど）の際は、親切心を持って一番上に戻してあげましょう。
スムーズな移動: CSSで scroll-behavior: smooth; を設定しておくと、これらのリセットが起きた時に「パッ」と飛ぶのではなく「スルスルッ」と動くようになり、さらに心地よさが増します。

居場所を、見失わせない。scroll オプションを使いこなして、情報の更新が起きてもユーザーが常に安心してページを回遊できる、安定した操作環境を整えてください。次の記事からは、アプリの信頼性を決める「バリデーション（096. Validation）」の世界へと進みます。