Currently, my contact form is functioning well with jQuery verification instead of AJAX due to a lack of development time. However, I now want the page to scroll down automatically when there are errors in the form. To achieve this, I have included jquery.scrollTo.js in my header.php file and added the following script for scrolling:
if ($("#front_page_contactformulier span").hasClass("error")) {
$('body').scrollTo('#fp_content_006',4000);
}
The strange thing is that when the
#front_page_contactformulier spanerror, it scrolls past the intended element (almost to the bottom of the page).
If I modify the script to target a different element like so:
if ($("#front_page_contactformulier span").hasClass("error")) {
$('body').scrollTo('#fp_content_005',4000);
}
It works perfectly fine?
I'm struggling to figure out why this discrepancy exists. Below is the complete code:
HTML:
<section id="fp_content_006">
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<article>
<?php if( get_field('koptekst_6') ): ?>
<h2><?php the_field('koptekst_6'); ?></h2>
<div style="display:block;height:2px;width:30px;background:#f60;margin-left:auto;margin-right:auto;margin-bottom:15px;margin-top:15px;"></div>
<?php endif; ?>
<?php if( get_field('content_koptekst_6') ): ?>
<?php the_field('content_koptekst_6'); ?>
<?php endif; ?>
</article>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="row">
<div id="front_page_contactformulier">
<span class="error">Error</span>
</div>
</div>
</div>
</div>
</section>
CSS:
#fp_content_006 {
position:relative;
margin-bottom:90px;
text-align:center;
margin-top:90px;
}
jQuery:
if ($("#front_page_contactformulier span").hasClass("error")) {
$('body').scrollTo('#fp_content_006',4000);
}
Furthermore, the functionality can be viewed on this JSFiddle link. It's worth noting that it surprisingly works on this platform.