2017-09-12 2 views
0

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

しかし、フォームにエラーがある場合は、ページを下にスクロールしたいと思います。私は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場合

+0

レンダリングされたDOMをチェックしましたか?要素は底にありますか? – TGarrett

+0

フォームの送信ボタンを使用して完了しました。送信をクリックすると、エラーが表示されます。しかし、ページはフォームに自動的にスクロールしてエラーを表示しません。私は今のようにこれをやっているのです。 –

+0

jsFiddleはPHPを処理しますか? – freginold

答えて

0

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

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

あなたはHERE

+0

です。別の要素を指していればうまくいきます。 「006」のコンテンツ部分だけではありません。また、ファイルにフォームを含めると(フォームコード自体を配置すると)、要素を超えてスクロールします。だから私は 'include php'コードで何かだとは思わない。 –

0

あなたが投稿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することをお勧めします。

+0

あなたは正しい。要素にスクロールする方法がさらにあります。私はピクセルを使用することができますが、すべてのスクリーンが同じピクセルを持つわけではありませんので、私はそれを変更する必要があります。 '4000 'はテストのためだけにあります... –

関連する問題