ScrollTo function scrolls past element

Question

I have this simple contact form set up and, since I don't have the development time at this moment, I set this one up using jQuery verification instead of AJAX. This works fine.

But now I would like to have the page scroll down when there are errors in the form. I've downloaded jquery.scrollTo.js and added it to my header.php file. And I have the following script for the scrollTo:

if ($("#front_page_contactformulier span").hasClass("error")) {
    $('body').scrollTo('#fp_content_006',4000);
}

Now the weird thing is, when the #front_page_contactformulier span has class error it scrolls past this element (like literally to the bottom of the page).

If I change the script to another element:

if ($("#front_page_contactformulier span").hasClass("error")) {
    $('body').scrollTo('#fp_content_005',4000);
}

It works?

I cant for the life of me find out why this is happening? Here is my full 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);
}

Here is a fiddle, and the super weird thing is, it works here.

Answer 1

Check if your jquery.scrollTo.js is included properly in header.php file and remember this from PHP documentation:

Remember that header() must be called before any actual output is sent, either by normal HTML tags, blank lines in a file, or from PHP. It is a very common error to read code with include, or require, functions, or another file access function, and have spaces or empty lines that are output before header() is called. The same problem exists when using a single PHP/HTML file.

You can find documentation HERE

Answer 2

According to the JS you posted, let me break it down for you

if ($("#front_page_contactformulier span").hasClass("error")) {
    $('body').scrollTo('#fp_content_006',4000);
}

The first argument should be the Jquery Object and you just need to wrap your selector with jquery object like this:

    $('body').scrollTo($('#fp_content_006'),4000);

As per documentation provided here, you have plenty other ways to scroll instead of selector.

You can find the demo here

Also would like to mention, 4000 is the duration of animation which seems to be pretty high, i would recommend it to be 300 to 800.