jQuery：透過している状態から可視化するスムーズスクロールの作成

Question

jQueryで開発をしています。
スムーズスクロールを作っているのですが、アニメーションがうまく効きません。

「作りたいもの」
・ウィンドウの右下に固定表示
・クリックするとページの上部にまでスムーズスクロール
・cssで透過
・スクロールするにつれてアニメーションで可視化

「jQuery 最高の教科書」を参考にしながら作っています。
スムーズスクロール自体は出来ても、透過から可視化へのアニメーションができません。
アドバイスをお願いします。

jQuery(function(){
//スムーズスクロール
    $('.back-to-top').each(function () {
        var $el = $(scrollableElement('html', 'body'));
        $(this).on('click', function (event) {
            event.preventDefault();
            $el.animate({ scrollTop: 0 }, 250);
        })
        .on('scroll', function(event){
            $(this).stop(true).animate({
                opacity: 1
            });
        });
    });
    function scrollableElement (elements) {
        var i, len, el, $el, scrollable;
        for (i = 0, len = arguments.length; i < len; i++) {
            el = arguments[i],
            $el = $(el);
            if ($el.scrollTop() > 0) {
                return el;
            } else {
                $el.scrollTop(1);
                scrollable = $el.scrollTop() > 0;
                $el.scrollTop(0);
                if (scrollable) {
                    return el;
                }
            }
        }
        return [];
    }
});

Answer 1

ごめんなさい。
変数が書き漏れてました

jQuery(".back-to-top").on('click', function () {
    jQuery("html, body").animate({
        scrollTop: 0
    }, 2000);
    return false;
});

jQuery(window).on('scroll', function (e) {
    var scroll = $(window).scrollTop();
    var p = 20; //表示させはじめる位置
    if (scroll >= p ) {
        //表示
        jQuery(".back-to-top").animate({
            opacity: 1
        }, 200);
    } else {
        //非表示
        jQuery(".back-to-top").animate({
            opacity: 0
        }, 200);
    }
    return false;
});

Comments

[drunkdoll]

もし動かなかったらコンソールのエラーを書いてもらえると回答しやすいですね

[makoto-n]

ありがとうございます。
最後に$(window).trigger('scroll');を加えてユーザビリティの高いものにしてみました。
ちなみになんですが、私が最初に書いていたソースではどこがおかしいのでしょうか？

[drunkdoll]

scrollの状態を見ているのが、windowではなく、ボタンを見ていたところでしょうか。

[makoto-n]

なるほど、ありがとうございます。

Answer 2

なるほど！理解しました。
もっといい書き方があるかもしれませんが、下記ではいかがですか？

    jQuery(".back-to-top").on('click', function () {
        jQuery("html, body").animate({
            scrollTop: 0
        }, 2000);
        return false;
    });

    jQuery(window).on('scroll', function (e) {
        var scroll = $(window).scrollTop();
        var p = 20; //表示させはじめる位置
        if (scroll >= ) {
            //表示
            jQuery(".back-to-top").animate({
                opacity: 1
            }, 200);
        } else {
            //非表示
            jQuery(".back-to-top").animate({
                opacity: 0
            }, 200);
        }
        return false;
    });

Comments

[makoto-n]

なりません。
テスト環境はどのような構成でしょうか？

Answer 3

ごめんなさいね。
書き方がとっても悪かったです。
下記のみで動きます。今度はテスト済みです笑

    jQuery(".back-to-top").on('click',function () { 
        jQuery("html, body").animate({
                scrollTop: 0,
                opacity: 1
            }, 2000);
        return false; 
    });

Comments

[makoto-n]

ありがとうございます。
ですが、スクロールしていると次第に表示されるようにしたいです。
それと、透過変わりません、、。

[drunkdoll]

すみません。
勘違いしてましたね。
ボタン以外にスクロールしていると次第に表示したい要素が別にあるってことですよね？

[makoto-n]

いえいえ、説明が下手だっただけです。
この「上に戻る」ためのボタンをスクロールして下に降下していくとopacity:1になるようにしたいです。
それ以外の物は現状は触れていないです。

Answer 4

試していないの使えるか分かりませんが、下記ではいかがですか？
できなかったらごめんなさい

.on('click', function(event){
            $(this).animate({
                scrollTop: 0,
                opacity: 1
            }, 250);
        });

Comments

[makoto-n]

スクロールできなくなりました、、。