3

サイトを下にスクロールすると、小さな「トップに戻る」div を表示しようとしています。これが私の div のコードです (開発中は、後ですべてを base.css ファイルに移動するまで、スタイルはインラインです)。

    <div id="backToTop" style="position:fixed; right:10px; top: 200px; width: 50px; height:50px; color:#ffffff; background-color:#000000; visibility:hidden"><a href="#top">Back to Top</a></div>

ご覧のとおり、かなり簡単です。次に、jQuery を使用して、ウィンドウがわずかに下にスクロールされて div が表示されたことを検出しようとしています。

    $(window).scroll(function(){
       if($document).scrollTop() > 0){
          $('#backToTop').show();
       }else{
          $('#backToTop').hide();
       }
    });

私の問題は、スクリプトがトリガーされていないように見えることです。ページを下にスクロールすると、div が表示されません。

フォーム検証のためにページに追加の jQuery があるため、これをその関数と一緒に含めてみました。

    $().ready(function(){ /* Code goes here */ }

これ以外にも含めてみましたが、喜びがありませんでした。ページの残りの部分では、Twitter ブートストラップを使用しています。

この完全に有効なコードが機能しない理由を誰かが教えてくれたら、それは素晴らしいことです。

乾杯、

J

4

1 に答える 1

5

コードにタイプミスがあります:

if($document).scrollTop() > 0){

不足してい(ます：

if( $(document).scrollTop() > 0 ) {
     ^

これが実際の例です: http://jsfiddle.net/U7scm/

編集

を設定していることにも気付きましたvisibility: hidden。jQuery.show()と関数はプロパティ.hide()を切り替えるため、代わりに使用しますdisplaydisplay: nonevisibility: hidden

于 2013-07-24T11:10:57.207 に答える