2017-01-27 10 views
0

私は現在大学のコース(リンク:http://divedesigns.com/demo/btw17)のウェブサイトを開発しており、私自身は解決できない問題があります。私は「トップトップ」ボタンを持っています。 jQueryを使用すると、ページをスムーズにスクロールできます。サブページでjQuery関数が実行されていません

HTML

<a id="back-to-top" href="#"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a> 

script.jsファイルに次のコードは、私のウェブサイトのホームページ上で正常に動作します。残念ながら、これはどのサブページでも機能しません。

jQueryの

$("#back-to-top").click(function(e){ 
    e.preventDefault(); 
    $("html, body").animate({scrollTop: "0"}); 
}); 

あなたはどんな提案を持っていますか?

+0

わかりませんが、最初のページには 'subpages-script.js'が含まれていますが、他のページは含まれていません。それをテストできますか?また、スクリプトをページの末尾に置く方が良いです(閉じる ' 'タグの前に) –

+0

の内容がサブページに動的に挿入されているようです(メインページとサブページの元のHTMLソースを見てください)。おそらくちょうど注射の後にイベントを再度添付しなければならないかもしれません、それは多分ちょうど取り外されるか、または接続されませんか? – Gunnar

+0

@ GilleQ。と同じ行に沿って、スクロール機能を 'subpages-script.js'に移動してみてください。私がChromeで完全なソースを調べるだけで、 '#back-to-top'要素は'

'と'

答えて

1

クリックリスナーはこのリンク要素にあまりにも早く(#back-to-top)接続されているようですが、後でこのイベントリスナーをコンソールに接続すると動作します。あなたはすでにあなたがこのアプローチを使用する必要があり、なぜそれが説明されている。このexampleon方法?:

$(document).on("click", "#back-to-top", function(e) { 
    e.preventDefault(); 
    $("html, body").animate({scrollTop: "0"}); 
}); 

を試してみました。

これも役立ちます。

+0

ありがとうございます。それが私の問題を解決しました! –

+0

あなたは大歓迎です! – Blauharley

1

私はコンソールでコードを手動で実行しようとしましたが、メインページと同様に正常に動作します。だから私は、HTMLの構造に行って、私はあなたがそう基本的にブラウザがバック・ツー・トップdoesnの素子#上記のコードを実行したとき

$("#back-to-top").click(function(e){ 
    e.preventDefault(); 
    $("html, body").animate({scrollTop: "0"}); 
}); 

が含まれているscript.jsをロードした後にフッターをロードしていることがわかりますまだ存在していないので、うまくいきません。あなたがしなければならないのは、script.jsをsubpages-script.jsの後ろに置くだけです。

希望すると助かります!

関連する問題