【jQuery】「submit」をクリックした時にURLへパラメーターが付与されてしまう時の対処法

最近、新規制作のコーディングを行う際に1ページで完結する「シングルページ」が多くなってきました。この構成は縦に長く、スマートフォンやタブレットで見やすいという特徴があります。

また、コンテンツの中身を理解した上でページ下部に「お問合せ」が出現するので、問い合わせや資料請求をしてもらえる確率が高くなるというメリットもあるそうです。
しかし、この「問い合わせフォーム」がシングルページ作成時に悩みの種となることがあります。

弊社では問い合わせフォームを導入する際にシステムチームが開発・テンプレ化したファイルを各案件で使用しています。
これにはtplファイルを利用しており、問い合わせボタンはinputタグのsubmitで入力内容を送り、問題なければ入力内容確認ページへ遷移する流れとなります。
その際に、もし入力内容に不備がある場合はエラー文章が吐き出される仕組みとなっています。
同時にURLへ下記のようなパラメーターが付与されページが再読み込みされます。

https://○○○○○○○.jp/
↓
https://○○○○○○○.jp/index.php?act=confirm

この「再読み込み」の動作によって画面がページTOPへ移動してしまいます。
「ページが長い」「問い合わせフォームが下部にある」というシングルページの構造が悪い方向に働くのです。
入力不備が発生する度にページ下部までスクロールする必要があるのではユーザビリティ上よろしくありません。
回避方法はたくさんあると思いますが（inputをクリックしても再読みさせないなど）
私はjQueryで対応しました。

回避方法

対応方法は下記の通りです。
入力時に不備がある場合は「act=confirm」という特定のパラメーターがURLの後ろに付与されるので、このパラメーターと一致する時に問い合わせフォームを囲むdivにidをつけ
.offset()でアンカーさせる方法です。

if(document.URL.match(/act=confirm/)) {
    var position = $('#contact').offset().top;
    $('body,html').scrollTop(position);
  }

非常に短い行数で対応することが可能でした。
このように、システムーチームの担当者から「フロントでどうにかして」と頼まれることは多いのでjQueryはよく勉強しておく必要があると感じます。

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。