javascript - ScrollTo 函数滚动经过元素

Question

我设置了这个简单的联系表单，由于此时我没有开发时间，所以我使用 jQuery 验证而不是 AJAX 来设置它。这很好用。

但现在我想在表单出现错误时让页面向下滚动。我已经下载了 jquery.scrollTo.js 并将其添加到我的 header.php 文件中。我有以下用于 scrollTo 的脚本:

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

现在奇怪的是，当 #front_page_contactformulier span 有类 error 时，它会滚过这个元素(就像字面意思到页面底部)。

如果我将脚本更改为另一个元素:

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

有用吗？

我一辈子都弄不明白为什么会这样？这是我的完整代码:

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);
}

这是一个fiddle ，最奇怪的是，它在这里有效。

Answer 1

检查 jquery.scrollTo.js 是否正确包含在 header.php 文件中，并从 PHP 文档中记住这一点:

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.

您可以找到文档 HERE