スクロールすると出てくる「トップに戻る」

トップからスクロールするとひょこっとでてくる「トップに戻る」の実装法です。

html部

<p id="rippy"><a href="#"><img src="img/rippy.png"></a></p>

css部

#rippy {
    position: fixed;
    bottom: -30px;
    right: 5px;
    z-index: 99;
}

#rippy img {
    width: 180px;
    float: right;
}

#rippy a {
    padding: 30px 0;
    display: block;
}
#rippy a:hover {
}

js部

$(function() {
    var showFlag = false;
    var topBtn = $('#rippy');
    topBtn.css('bottom', '-300px');
    var showFlag = false;
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            if (showFlag == false) {
                showFlag = true;
                topBtn.stop().animate({'bottom' : '-15px'}, 400);
            }
        } else {
            if (showFlag) {
                showFlag = false;
                topBtn.stop().animate({'bottom' : '-300px'}, 400);
            }
        }
    });
});

これで のような状態になります。