WORDPRESS KONETA ワードプレスの宝物

MW WP FORMを使用して、「内容確認」「送信完了」などに進むときに
「画面変遷時のスクロールを有効にする」をチェックするとフォーム本体部分に移動します。

ただ、これはヘッダー固定などにすると見切れてしまうことが多々あります。

ですので、その位置をJavascriptにて調節していきます。
その前に、質問もありましたので、Javascript以外の方法も下記に記載します。

実は方法は２種類ある。

一般的にはアンカーリンクの位置はJavascriptにて制御するもの。という概念があります。
自分もそう思ってますし、今回もそちらを紹介するつもりですが、ことwordpressのMW WP FORMに関してはjavascriptをいじらなくても調整は可能です。
もちろん位置調節はjavascriptを使用しない限り「CSS」にて行います。

MW WP FORMで排出されるコード自体に処理する

こちらはfunction.phpにて処理したほうが・・・と思われるかもしれませんが、実務の経験上少しでもwordpress本体の動きに負荷をかけたくないならばプラグインのファイルに手を入れたほうが良いです。
※もちろん場合によってはデメリットもありますが、ここでは置いておきます。

該当ファイル「/wp-content/plugins/mw-wp-form/templates/contact-data/detail.php」

上記の赤枠の部分に、そうですね、例えば下記を

<a name="unker1" id="unker1"></a>

こちらを該当箇所に入れてみる

その後に、「/web/disart-f/wp-content/plugins/mw-wp-form/templates/contact-data/returning-link.php」を開き

<a href="<?php echo $link; ?>"><?php esc_html_e( '&laquo; Back to the list', 'mw-wp-form' ); ?></a>
↓
<a href="<?php echo $link; ?>#unker1"><?php esc_html_e( '&laquo; Back to the list', 'mw-wp-form' ); ?></a>

上記のようにすれば完了です。

ただこれはあくまでjavascriptを避けたいと思うときの手法です。

WEB制作業務を行ってますと必ず予想もしなかったクライアント様からの要望などもありますので、知識の一つとして持っておくといわゆる「自分自身の引き出し」が増えますので後々お得かと思います。

こっちが主流で本題！Javascriptで位置調節！

調節するファイルは「/wp-content/plugins/mw-wp-form/js/scroll.js」となります。

具体的には下記のコードとなります。

jQuery( function( $ ) {
	var posy = $( '.mw_wp_form' ).offset().top;
	posy = posy + parseInt( mwform_scroll.offset );
	if (window.matchMedia("(max-width: 767px)").matches) {
		posy = posy - 60;
	} else {
		posy = posy - 80;
 	};
	$( window ).scrollTop( posy );
} );

上記のコードはPC時とSP時に振り分けているので猶更気が利いたコードとなります。
注意！！
Javascriptがダイレクトにサイトの挙動に影響します。
必ず実装後のテストをお勧めいたします。

今回のプロの心得

上にも書いたプラグインでの対応は主流ではありません。
WEBサイト制作を始めたばかりの方は、とにかく効率的なことだけを覚えようとします。

ただ、自分も長い間この業界で仕事をしておりますと、ほぼほぼ無駄なことはありません。
意見効率的じゃない、今の時代に添ってない、そんな作業や対応方法もすべては
「自分自身の引き出し」になっております。

とかくこの業界は己自身の経験が財産となり武器となります。
ぜひいろいろなことにチャレンジと試行錯誤していただければと思います。