ラジオボタンにチェックを入れると、 画面のスクロール位置が 強制的にページ最上部へ移動してしまう

はじめに

Web開発案件の中でハマったこと／学んだことを共有します。
同じような事象に遭遇した方の参考になれば幸いです。

🧩 発生した事象

現象

（何が起きたかを具体的に）

例：
ラジオボタンをクリックすると、画面が最上部までスクロールしてしまう。

環境

• OS：Linux
• ブラウザ：Edge
• 言語：Java JSP JavaScript
• FW/ライブラリ：Spring
• その他：

🔍 原因調査

調査の過程も含めて書くと、読者の価値が上がります。

• 最初に疑ったこと：共通処理のchangeイベントが走っている？
  チェック時にイベント処理を入れていなかったので、何らかの共通処理が実装されていることを疑った。
• 試したこと：ラジオボタン押下時にchangeイベントが発生しても自動スクロールをさせないように制御を入れた。
• 切り分け内容：changeイベントが走っているわけではないので、実装の構造を見直すことにした。
• 最終的に分かった原因：構造に問題があった

💡 原因

①ラベル要素内にラジオボタン要素を定義していた
②ラジオボタン要素内のidとラベル要素内のidが一致しておらず、ラジオボタンの特定ができないため、自動スクロールが発生

🛠 対応方法

// ラジオボタン
<div class="radio-container">
  <html:radio property="rdoNo" styleId="radioNo_1">
  <label class="label-radio" for="radioNo_1"></label>
</div>