发送邮件后，联系表格7滚动到顶部

Question

我正在为我的网站使用联系表格7。在表格提交并成功发送邮件后，我隐藏了表格div并显示另一个div正常工作。但是在显示另一个div后，徽标未显示。因此，我需要滚动顶部提交后的页面，我尝试使用scrolltotop javascript，但无法正常工作。请看一下我的代码并提供解决方案。

 add_action( 'wp_footer', 'contact_form_sent' );

 function contact_form_sent() {
  ?>
  <script type="text/javascript">
    document.addEventListener( 'wpcf7mailsent', function( event ) {
      if ( '1251' == event.detail.contactFormId ) {
        // alert('coming');
        document.getElementsByClassName('landing-form')[0].style.display = 'none';
        document.getElementsByClassName('landing-form')[1].style.display = 'none';
        document.getElementsByClassName('landing-success')[0].style.display = 'block';
        document.getElementsByClassName('landing-success')[1].style.display = 'block';
        window.scrollTo(0, 0);

 } //Use this only when targeting specific form.
   }, false );
  </script>
  <?php
 }

Answer 1

例如，您可以尝试获取提交按钮的ID

HTML

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

JS

  <script>
  function topFunction() {
  window.scrollBy(0, 0);
}
</script>

所以您也可以通过像提交的eventlistner一样更改onclick并将其添加到js中来对表单进行更改。

注意：它是scrollBy()，而不是scrollTo()。