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

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

jQuery
<script>
  $(document).ready(function () {
    $('#search-form').attr('action', function (i, val) {
      return val + '#link01';
    });
  });
</script>

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

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

以上です!

最後に

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

この記事を書いた人

アバター

しんぺー

Web制作会社のフロントエンドエンジニア。
2019年9月よりWeb制作を独学、2021年3月ジョブチェンジでエンジニアに。

プログラミングを始めたい方や、学習中の方、副業・転職したい方に向けて発信していますが、業務で覚えた技術がメインになってます。

趣味は音楽です。下の「ウェブサイト」に趣味で作ったサイトをリンクしていますので、興味ある方はどうぞ。