トップに戻るボタン

仕様

トップ戻るボタン。
ある程度スクロールするとボタンがfadeinする。（今回は500で設定）

HTML

<div data-trigger-pagetop="pagetop" style="opacity: 0;">
   <img src="/img/diagram/btn.png" alt="トップに戻る">
</div>

js

var pageTop = function(){
    var $trigger = $('[data-trigger-pagetop]');
    if(!$trigger.length) return; //triggerがない場合return
    $(window).on('scroll',function(){
        var now = $(window).scrollTop();
        if (now > 500){//500px以上スクロールするとボタンを表示
            $trigger.stop(true).animate({
                opacity: 1
            }, 100);//0.1秒かけてfadein
        } else {//そうでない時はボタンを非表示
            $trigger.stop(true).animate({
                opacity: 0
            }, 100);//0.1秒かけてfadeout
        }
    });
    $trigger.on('click',function(){
        $('html,body').animate( {scrollTop:0} , 'slow' );
    });
};