滚动到联系表 7 中的成功字段（wordpress）

Question

使用 Wordpress 和插件联系表格 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

你可以试试这个，聊天联系表的回复并施展魔法

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

Answer 2

此代码将滚动（提交后）到 CF7 表单下方带有结果消息的元素，您可以调整它以滚动到您的元素，只需设置适当的偏移量并将选择器“.wpcf7-response-output”更新为你的：

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 );
    });
});

滚动到联系表 7 中的成功字段（wordpress）

Scroll to success field in contact form 7 (wordpress)

wordpress

jquery

scroll

contact-form-7