ScrollTo関数が要素をスクロールします

Question

この簡単な連絡フォームが設​​定されています。この時点で開発時間がないので、AJAXの代わりにjQuery検証を使用してこの設定を行います。これは正常に動作します。

しかし、フォームにエラーがある場合は、ページを下にスクロールしたいと思います。私は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で、スーパー奇妙なことは、それが動作しますが、ありますここに。あなたのjquery.scrollTo.js場合

Answer 1

チェックはheader.phpのファイルに適切に含まれており、PHPのドキュメントからこれを覚えている：

は（そのヘッダを覚えておいてください）実際の出力される前に呼び出されなければなりません通常のHTMLタグ、ファイルの空行、またはPHPのいずれかによって送信されます。 include、require、関数、または別のファイルアクセス関数でコードを読み込み、header（）が呼び出される前に空白または空行が出力されることは非常によくあるエラーです。単一のPHP/HTMLファイルを使用する場合も同じ問題があります。

あなたはHERE

Answer 2

あなたが投稿JSによると、最初の引数はjQueryオブジェクトであるべきで、あなただけのラップする必要があり、私はあなた

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

のためにそれを打破しましょうドキュメントを見つけることができますこのようなjqueryオブジェクトを持つセレクタ：

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

hereでは、セレクタの代わりにスクロールする方法が他にもたくさんあります。

あなたは

hereはまた、言及したいデモを見つけることができ、4000はかなり高いと思わアニメーションの期間があり、私は800から300することをお勧めします。