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

這是一個小提琴 ，而超級奇怪的是，它在這里起作用。

Answer 1

檢查header.php文件中是否正確包含了jquery.scrollTo.js ，並從PHP文檔中記住這一點：

請記住，必須先通過常規HTML標記，文件中的空白行或從PHP發送任何實際輸出，然后調用header（）。 讀取包含，或要求函數或另一個文件訪問函數的代碼，並在調用header（）之前輸出空格或空行，這是一個非常常見的錯誤。 使用單個PHP / HTML文件時，存在相同的問題。

您可以在此處找到文檔

Answer 2

根據您發布的JS，讓我為您分解

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

第一個參數應該是Jquery對象，您只需要用jquery對象包裝選擇器，如下所示：

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

根據此處提供的文檔，您可以使用許多其他滾動方式來代替選擇器。

你可以在這里找到演示

還想提及的是，4000的動畫持續時間似乎很高，我建議它是300到800。