时间戳

首页 > 解决方案 > 滚动到联系表 7 (wordpress) 中的成功字段

jquery - 滚动到联系表 7 (wordpress) 中的成功字段

问题描述

使用 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);

标签： jquerywordpressscrollcontact-form-7

解决方案

此代码将滚动（提交后）到 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 );
    });
});

推荐阅读