とりあえず、オーバーライドで対処します。
有名プラグイン、Contact form 7に確認画面を追加するプラグイン、Contact form 7 add-confirmですが、確認画面に移行した際に、フォームの一番上に自動的にスクロールで戻ります。
その際、ヘッダーなどをposition:fixed
で設定していると、その高さの分だけ戻りすぎて、フォームに被ってしまいます。なので、スクロール量を調整したいのですが、この動き自体はプラグインに組み込み済みなので、ちょっと厄介です。
動きはプラグイン内のJavaScriptによって行われているので、このJavaScriptを書き換えてしまえば、挙動を変えることができます。しかし、プラグインを書き換えると、アップデートの際にもとに戻る可能性もあります。かといって、アップデートしないのも、セキュリティ的にもあまりよろしくありません。
書き換えずに上書き(オーバーライド)する
そこで、根本的な解決ではありませんが、関数を上書き(オーバーライド)することで対処します。この動きはプラグイン内のwpcf7c_scroll
というJavaScript関数なので、これをコピーしてきて、修正したのが以下の記述です。
wpcf7c_scroll = function(unit_tag) {
// contact form7 add-confirm OVERWRIDE
jQuery(jQuery.find("input[name=_wpcf7_unit_tag]")).each(function(){
if(jQuery(this).val() == unit_tag) {
var parent = jQuery(this).parents("form");
var speed = 500; //SPEED CHANGE
var position = parent.offset().top - 120; //OFFSET CHANGE
if(jQuery('.wpcf7c-anchor').size() != 0) {
position = jQuery('.wpcf7c-anchor').offset().top - 120; //OFFSET CHANGE
}
jQuery("html, body").animate({scrollTop:position}, speed, "swing");
}
});
}
6行目にスクロールする速度があるので、ここの数字を書き換えることで速度も調節できます。肝心のスクロール量の変更ですが、7行目と9行目に書かれているので、parent.offset().top
から120
を引くことで、120px分だけオフセットを取れます。ここの数字はヘッダーの高さなどに合わせて任意で調節して下さい。
今後の変更によっては無効になる可能性あり
この方法は、プラグイン書き換えよりはアップデートによる環境変化に強いと思います(*)が、関数名が変更になったりすれば、この方法は効かなくなります。
*この挙動部分はプラグインの根幹に関わるポイントでないので、頻繁にアップデートされないだろう、という個人的な推測です。
将来的は製作者様が対応してくれるかもしれないですが、取り急ぎこんな感じで対応しています。