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

检查 header.php 文件中是否正确包含 jquery.scrollTo.js ，并记住这些来自PHP文档：

请记住，在发送任何实际输出之前，必须通过普通HTML标记，文件中的空行或PHP来调用header（）。使用include或require，函数或其他文件访问函数读取代码是一个非常常见的错误，并且在调用header（）之前输出空格或空行。使用单个PHP / HTML文件时存在同样的问题。

您可以找到文档HERE

Answer 2

根据你发布的JS，让我为你分解

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

第一个参数应该是Jquery对象，你只需要用jquery对象包装你的选择器，如下所示：

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

根据提供的文档here，您还有很多其他方式可以滚动而不是选择器。

您可以找到演示here

另外想提一下，4000是动画的持续时间，似乎相当高，我建议它为300到800.

ScrollTo函数滚动过去的元素

2 个答案: