Q. フォームでsubmit buttonを押下すると上の方になぜかスクロールされる
フォームでsubmit buttonを押下すると上の方になぜかスクロールされるという相談を受けたので、その原因と対応についてまとめた。
前提
- このページにscroll-behavior: smooth;が指定されていた。
- 多くのブラウザでは、フォームがサブミットされた際にバリデーションエラーが吐かれると、問題があるフォーム要素にフォーカスし、エラーが表示される。
原因
Submit buttonが押されたときに、実はバリデーションエラーが発生していた。そしてフォーム要素にフォーカスする際に、scroll-behaviorによってスクロールが発生し、スクロールが発生したことに恐らく起因し、表示されるべきエラーが消えている。これによりSubmit buttonが押されると何故か上の方にスクロールされるという現象が起きていた。
未確認だが、恐らくエラーが消えてしまうのはChromeのバグだと思われる。
Firefoxなどでは発生しない。