Форма отправки останавливая другие функции, работающие с scrollify.move?

У меня есть веб-сайт на 1 страницу, который использует scrollify.js.

У меня есть 2 кнопки, чтобы прокрутить окно до соответствующего раздела для заполнения формы и возврата в верхнюю часть страницы.

Первая кнопка (icon2) с тегом (a) и классом scrollToB.

2-я кнопка (home-btn) с другим (a) тегом и классом scrollTo, который постепенно исчезает, чтобы вы могли вернуться в верхнюю часть, нажав эту кнопку.

Обе функции для прокрутки и постепенного исчезновения и работы работают до тех пор, пока я не нажму на кнопку отправить в форме, и хотя функция исчезновения все еще работает на кнопке, отдельные функции щелчка на 2 кнопках (scrollify.move) перестали работать? Это поведение одинаково, если форма не проходит проверку или отправляется?

рабочий пример — www.devonfoodmovement.com

Я искал часы и не могу найти что-нибудь подходящее?

Все скрипты / стили загружаются из моего файла functions.php

Индекс (front-page.php)

    <?php get_header(); ?>
<article id="section_1">
<section class='section-class' data-section-name="devonfoodmovement">
<?php include('home-layout.php');?>
</section>
</article>
<article id="section_2">
<section class='section-class' data-section-name="contact us">
<?php include('form.php');?>
</section>
<div class="home-btn"><a href="#section_1" class="scrollTo"><i class="fas fa-home"></i></a></div>
</article>
<?php get_footer(); ?>
</body>
</html>

дом-layout.php

    <?php ?>
<div class="container">
<div class="logo">
<div class="logo-image">
</div>
</div>
<div class="text">
<h1>Devon Food Movement</h1>
<h2>Website under construction <br class="textbreak">follow us below on ...</h2>
</div>
<div class="icons">
<div class="icon1"><a href="https://www.linkedin.com/in/luke-fearon-853606158/" target="_blank"></a></div>
<div class="icon2"><a href="#section_2" class="scrollToB"></a></div>
<div class="icon3"><a href="https://www.instagram.com/_u/five_mile_food" target="_blank"></a></div>
<div class="icon3m"><a href="instagram://user?username=five_mile_food"></a></div>
</div>
</div>

functions.php

    <?php
function register_my_menus() {
register_nav_menus(
array( 'header_menu' => __( 'Header Menu', 'DevonFoodMovement'),
'footer_menu' => __( 'Footer Menu', 'DevonFoodMovement')
)
);
}
add_action('init', 'register_my_menus');

/* GOOGLE FONTS */

function DFM_styles()
{
wp_register_style('DFM', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
wp_enqueue_style('DFM');


}
add_action('wp_enqueue_scripts', 'DFM_styles');

function DFM_form()
{
wp_register_style('DFMform-css', get_template_directory_uri() . '/form.css', array(), '1.0', 'all');
wp_enqueue_style('DFMform-css');
}
add_action('wp_enqueue_scripts', 'DFM_form');

function DFM_scripts()
{
wp_register_script('j-query-min', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' );
wp_enqueue_script('j-query-min');

wp_register_script('j-query-mob-min', 'http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js' );
wp_enqueue_script('j-query-mob-min');

wp_register_script( 'modernizr', get_template_directory_uri() . '/modernizr-1.6.min.js' );
wp_enqueue_script( 'modernizr' );

wp_register_script('scrollify-min', 'https://cdn.jsdelivr.net/npm/[email protected]/jquery.scrollify.min.js' );
wp_enqueue_script('scrollify-min');

wp_register_script('jquery-custom', get_template_directory_uri() . '/customjs.js' );
wp_enqueue_script('jquery-custom');
}
add_action('wp_enqueue_scripts', 'DFM_scripts');

function load_fonts()
{
wp_register_style('et-googleFonts', 'https://fonts.googleapis.com/css?family=Josefin+Sans:300,400');
wp_enqueue_style( 'et-googleFonts');
}
add_action('wp_print_styles', 'load_fonts');

/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/

файл custom.js

    $(document).ready(function(){
$('article').css({'height':($(window).height())+'px'}).css({'width':($(window).width())+'px'});
$(window).resize(function(){
$('article').css({'height':($(window).height())+'px'}).css({'width':($(window).width())+'px'});
});
});
$(document).scroll(function(){
$(function() {
$.scrollify({
section: ".section-class",
sectionName : "section-name",
/*interstitialSection : ".footer-end",*/
scrollSpeed: 1000,
setHeights: true
});
});
});
$(document).scroll(function (){
if(window.location.href === "http://devonfoodmovement.com/#devonfoodmovement"){
$('.home-btn').fadeOut(500);

} else if(window.location.href === "http://devonfoodmovement.com/#contact-us") {
$('.home-btn').fadeIn(500).css('display','block');
}
});
$(document).ready(function (){
$(".scrollTo").click(function() {
$.scrollify.move(0);
});
});
$(document).ready(function (){
$(".scrollToB").click(function() {
$.scrollify.move(1);
});
});

form.php

    <?php include ('form_process.php');?>
<div class="grey">
<div class="container-contact">
<form id="contact" method="post" >
<div id="column-contact-left">
<div class='contact-logo'></div>
<h3>Contact the Devon Food Movement</h3>
<fieldset id="field-no-ui">
<input placeholder="Your name" type="text" tabindex="1" name="name1" value="<?= $name ?>" >
</fieldset>
<span class="error"><?= $name_error ?></span>
<fieldset id="field-no-ui">
<input placeholder="Your Email Address" type="text" name="email" value="<?= $email ?>" tabindex="2" >
</fieldset>
<span class="error"><?= $email_error ?></span>
</div>
<div id="column-contact-right">
<fieldset id="field-no-ui">
<textarea id="field-no-ui" placeholder="Type your Message Here...." name="message" value="<?= $message ?>" tabindex="3" ></textarea>
</fieldset>
<div class="g-recaptcha" data-sitekey="sitekey" ></div>
<span class="captcha-failed"><?= $captchafailed; ?></span>
<span class="sent"><?= $sent; ?></span>
<fieldset id="field-no-ui">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</div>
</form>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</div>
</div>

Форма-process.php

    <?php
function post_captcha($user_response) {
$fields_string = '';
$fields = array(
'secret' => 'secret',
'response' => $user_response
);
foreach($fields as $key=>$value)
$fields_string .= $key . '=' . $value . '&';
$fields_string = rtrim($fields_string, '&');
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://www.google.com/recaptcha/api/siteverify');
curl_setopt($ch, CURLOPT_POST, count($fields));
curl_setopt($ch, CURLOPT_POSTFIELDS, $fields_string);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, True);
$result = curl_exec($ch);
curl_close($ch);
return json_decode($result, true);
}
$res = post_captcha($_POST['g-recaptcha-response']);
$name_error = $email_error = $captchafailed = "";
$name = $email = $message = $sent = "";
if (isset($_POST['submit']) AND (!$res['success'])) {
$captchafailed = "please check reCaptcha";
}
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name1"])) {
$name_error = "Name is required";
} else {
$name = test_input($_POST["name1"]);
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$name_error = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$email_error = "Email is required";
} else {
$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$email_error = "Invalid email format";
}
}
if (empty($_POST["message"])) {
$message = "";
} else {
$message = test_input($_POST["message"]);
}
if ($name_error == '' and $email_error == '' and ($res['success']) ){
$message_body = '';
unset($_POST['submit']);
foreach ($_POST as $key => $value){
$message_body .=  "$key: $value\n";
}
$email = $_POST['email'];
$to = '@gmail.com';
$subject = 'Contact Form Submit';
$headers = 'From:' . $email . "\n" . 'Reply-to: ' . $email . "\n"  ;
if (mail($to, $subject, $message, $headers)) {
$sent = "Message sent";
$name = $email = $message = '';
}
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}

-1

Решение

Я вижу много проблем здесь с тем, как это соединено.
Первое, с чего вы можете начать, это предотвратить поведение по умолчанию ваших ссылок на перемещение.

$(".scrollTo").click(function(event) {
event.preventDefault();
$.scrollify.move(0);
});
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]