1

Tumblr ブログに無限スクロール スクリプトをインストールしました。現在、一番上にスクロールするボタンを追加中です。ユーザーが特定のポイントを過ぎて下にスクロールすると、このボタンがフェードインし、上にスクロールするとフェードアウトします。また、トップへのジャンプだけでなく、スムーズなスクロールも提供したいと考えています。

私は HTML と CSS に堪能ですが、残念ながら JavaScript と jQuery については基本的に何も知りません。目的のスクロール ボタンを取得する方法を教えてくれた、JS 側のこのチュートリアルを見つけました。すべてうまくいきましたが、唯一の問題は、fadeOut が機能しないことです。要素が単に消えてしまいます。運が良ければ、1 マイクロ秒ほどフェードアウトし始め、その後消えることがあります。

私が使用しているJavaScriptは次のとおりです。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script>
$(function () {
    $("#gotop")
        .hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {
            $('#gotop').fadeIn(500);
        } else {
            $('#gotop').fadeOut(500);
        }
    });
    $('#gotop').click(function () {
    $('html,body').animate({
        scrollTop: 0
    }, 400);
    return false;
  });
});
</script>

HTML に単純なアンカー要素があり、ID #gotop を使用して CSS でスタイル設定されています。

<a href="#top" id="gotop">Top</a>

CSS:

#gotop {position: fixed;
    right: 2em; bottom: 2em;}

そのままで、フェードアウトを除いて、すべてが正常に機能します。

同様の問題についてインターネットを閲覧しました。私は出くわしたさまざまなことを試しましたが、残念ながらそのほとんどはギリシャ語でした.

編集：私はちょうど考えていました。フェードアウトする前に、ページが既に「非表示」ゾーンの上にスクロールされており、要素がすぐに非表示に設定されているため、フェードアウトが発生しない可能性はありますか?

誰かが何かを知っていれば、それは大歓迎です - お時間をありがとう！

4

2 に答える 2

0

お役に立てれば

JS フィドルのデモ

$(function () {
 $('#gotop').hide();
$(window).scroll(function () {

        if ($(this).scrollTop() > 400) {
            $('#gotop').fadeIn(500);
        } else {
            $('#gotop').fadeOut(500);
        }
    });
    $('#gotop').click(function () {
    $('html,body').animate({
        scrollTop: 0
    }, 400);
    return false;
  });
     });
于 2013-09-26T04:09:17.650 に答える
0

さて、いじくり回した後、私は問題を理解することができました。

* セレクターを使用して、ページのすべての要素に CSS3 トランジションが割り当てられるように設定したことがわかりました。

* {margin: 0; padding: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;}

便宜上これを行ったので、私が持っていたホバーがうまく遷移するようになりました. しかし、これが原因で私のスクロール・ツー・トップ・ボタンが誤動作していたようです!

私と同じ問題を抱えている人は、使用したトランジションをチェックして、トップへのボタンに影響を与えていないことを確認することをお勧めします。疑問がある場合は、一時的に削除して確認してください。

お役に立てれば。

于 2013-09-27T01:19:10.087 に答える