滚动至联系人表格7中的成功字段(wordpress)

Question

使用Wordpress和插件Contact Form 7，我想使用jQuery滚动到联系人表单上方的成功消息。

这是我的表格

<form action="/.../.../#wpcf7-f1581-p853-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">

我已经将以下代码添加到我的主题中，但它在重载时被调用，但不起作用。

var myEl = document.getElementsByClassName('wpcf7-submit');
myEl.addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}, false);

Answer 1

此代码将滚动(提交后(到CF7表单下方的带有结果消息的元素，您可以将其调整为滚动到您的元素，只需设置适当的偏移量并将选择器".wpcf7响应输出"更新为您的：

jQuery(function ($) {
$(document).ready(function ()
{
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
setTimeout(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $(".wpcf7-response-output").offset().top - 100
}, 500);
}, 500);
//console.log("Submited");
}, false );
});
});

Answer 2

你可以试试这个，聊天联系人表单的响应，并进行神奇的

document.addEventListener( 'wpcf7mailsent', function( event ) {
window.scrollTo({ top: 0, behavior: 'smooth' });
}, false );