0

下にスクロールするとフェードインするscrollToTopボタンを作成する単純なjQuery関数を作成しようとしています。

$(document).ready(function() {
    var start = 300;
    var duration = 200;
    var scrolled;

    $('.scrollUp').css('opacity', '0.0');

    $(window).scroll(function(){ 

        var opacity = (scrolled - start) / duration;

        scrolled = $(window).scrollTop();

        if (0 < opacity < 1) {
            $('.scrollUp').css('display', 'block').css('opacity', opacity);
        } else if (1 < opacity) {
            $('.scrollUp').css('display', 'block').css('opacity', '1.0');
        } else {
            $('.scrollUp').css('display', 'none').css('opacity', '0.0');
        }
    });

    $('.scrollUp').click(function(){
        $('html, body').animate({
            scrollTop: 0
        }, 500);
    });
});

実際の動作はこちら: http://jsfiddle.net/JamesKyle/fBvGH/

4

2 に答える 2

3

これは動作し、jsfiddleでテストされています：

$(document).ready(function() {
    var start = 300;
    var duration = 200;
    var scrolled;

    $('.scrollUp').css('opacity', '0.0');

    $(window).scroll(function(){ 

        var opacity = (scrolled - start) / duration;

        scrolled = $(window).scrollTop();

        if (0 < opacity < 1) {
            $('.scrollUp').css('display', 'block').css('opacity', opacity);
        } else if (1 < opacity) {
            $('.scrollUp').css('display', 'block').css('opacity', '1.0');
        } else {
            $('.scrollUp').css('display', 'none').css('opacity', '0.0');
        }
    });

    $('.scrollUp').click(function(){
        $('html,body').animate({
            scrollTop: 0
        }, 500);
    });
});

アップデート：

そして、これが不透明度アニメーションの実例です。この男は同じ方程式を探していたようです。

このような状況でいくつかの数学を使用することをお勧めします：

scrolled = $(window).scrollTop();
height = $('body').height();
height = Math.ceil((scrolled / height) * 100);
height = height / 100;

2回目の更新

わかりました。紺色のセクションの後に表示を開始します。さて、あなたがする必要があるのは、グラデーションの前の上部のその部分を除外することです。これを行うには、scrollTop値が水色のグラデーションの上部にヒットしたかどうかをチェックするif句を作成します。ドキュメントの上部から約300px。jsFiddle図

次に、上記の式で身長を使用する代わりに、グラデーションセクションの全高を使用します。約210px。この値は、上記のjQueryの変数の高さを置き換えます。これの実装に問題がある場合はお知らせください。上記の回答にコメントしていることに気づきませんでした。

于 2011-11-23T22:15:39.723 に答える
1

scrollTopはプロパティではないwindowため、コードを少し変更するだけです。 $(window).animate({scrollTop : 0},500);

に

$('html, body').animate({scrollTop : 0},500);

更新されたjsfiddleは次のとおりです：http：//jsfiddle.net/fBvGH/13/

于 2011-11-23T22:12:20.917 に答える