JavaScript初心者です。
初歩的なことかもしれませんが、調べてもなかなか見つからず時間がかかったので書きます。
事象
フォームに入力しようとクリックすると、スクロールしてトップに移動してしまいました。
また、モーダルの閉じるボタンをクリックした際に、少し上に行って元の位置に戻るという変な動きをしていました。
SpringBootでもASP.NETでも同様のことが起きました。
検索ワード
以下のワードで調べていました。
（過去に検索してそのまま残っていたタブから引用したので順不動です）
ページトップ 無効
スクロール 無効
スクロールトップ 無効
スクロールさせない
入力するとき 画面 移動
入力 画面 位置 動く
form input 選択 移動
入力 フォーカス 位置
入力 位置 固定
入力 位置 ずれる
勝手にスクロールされる
スクロール 上に戻る
背景固定 スクロール
これらのワードにプラスしてjQuery、js、Bootstrap5、SpringBootを入れていました。
jQueryか、BootstrapのjQueryが悪さしているのかなと思っていました。
それで出てくるスクロール無効をやって、スクロールができなくなったり、
特に何も変わらなかったり、
scrollTop()で位置取得も違う、
座標なんか出てきてちんぷんかんぷん。。
何日も調べても分からなくて、諦めて放置していました。
ある日調べてみたら一発で解決しました。
解決方法
「event.preventDefault()」です。
イベントの発生元が持つデフォルトの動作を無効化するものだそうです。
最初はinput, select, textarea, buttonクリックで書いていたのですが、
背景をクリックしても動いてしまったのでdivクリックになりました。
ちなみにinputフォーカスではなくクリックでないとききませんでした。
$(function () {
$('div').on('click', function() {
event.preventDefault();
});
});
モーダルでもASP.NETでも「event.preventDefault()」で解決しました。
その時の検索ワード
「jquery 入力 scrolltop 無効」
あれ？たいして変わりがない。。
そう、今まで検索していた「スクロール 無効化」で答えは書かれていたのです。
なんか違うだろうってスルーしちゃってたんですね。
今も別件でJavaScript詰まり中なのですが、仕様上できないのか、答えをスルーしちゃっているのか。
たぶん後者だと思うのですが、早くJavaScriptと仲良くなりたいです。
本当の原因（2023/8/13更新）
アプリケーションが未完の状態だったので久しぶりに触ってみました。
できていたかと思いきやボタン押下での送信処理ができない状態でした。
ヘッダー以下にcursor: pointer;がついていることも気になり開発者ツールでいろいろ見た結果、
<a href="#">で囲われていることに気づきました。
どこに記載しているのかファイル検索して、
共通htmlヘッダーのログアウトアイコンに暫定でつけていたaタグが閉じられていませんでした（タグが間違っている）。
くだらないミスなのに、解決まですごく時間がかかってしまいました。
Eclipse上で黄色い線がついていたのに気づかなかったです…
<header th:fragment="header">
<div class="container-fluid">
<div class="row d-flex align-items-center">
<!-- 略 -->
<div class="col-6 order-2 col-md-2 order-md-3 text-end">
<!-- ここです -->
<a href="#">
<i class="fa-solid fa-arrow-right-from-bracket"></i>
</button>
</div>
</div>
</div>
</header>