form送信後に任意の場所にスクロールするには、formのaction属性に”#link01″とするだけ｜form submit後にページ内リンクを設定する

form送信後にページ内リンク設定できないかな？
ページのコンテンツが長くて、フォーム欄が見えないんだよね。。

今回はこんな悩みを解決します

HTMLで設定する方法と、jQueryを使った方法の2つを紹介したいと思います。

しんぺー

こんにちは。
フロントエンド・エンジニアしんぺーです。

form送信後のページ内リンク設定は<form action=”#link01″>などするとできるのですが、今回はその方法に加えてjQueryを使った方法も紹介したいと思います。

actionのURLが自動で割り当てられていてHTMLで操作できない時などに使えると思います。

方法①：HTML

この方法は簡単です。下記のように設定するだけです。

HTML
<form id="search-form" action="#link01">
  <!-- フォームの内容 -->
</form>

aタグでやる時と同じ感じですね。

jQueryでは下記のような方法があります。
action属性の値を取得し、その値の後ろに#link01を追加しています。

jQuery
<script>
  $(function() {
    let act = $('form').prop('action');
    $("form").attr("action", act + "#link01");
  })
</script>

formのaction属性が自動で割り振られている場合、この方法が手っ取り早いです。
下のようなケースです。

<form id="search-form" action="ここに自動でURLが割り振られていて、HTML操作できない">
  <!-- フォームの内容 -->
</form>

以上です！

この記事が自分と同じ悩みを抱えた方のためになれば幸いです。
今回も最後までありがとうございました！