BLOG

忘却録

WEBに関するコーディング、プログラミングなど私的な忘却録として投稿していきます。また、参考サイトも併せて紹介していきます。

汎用性のあるシートをつくる②/jquery.qsbacktotop.min.js

2018.05.22

jquery.qsbacktotop.min.js

右下のトップへ戻るボタン

jQuery(function($){$(document).qsBackToTop({mode:"initial"})});
(function(b){b.easing.myEase=function(b,a,c,d,f){return-d*((a=a/f-1)*a*a*a-1)+c};b.fn.qsBackToTop=function(e){var a=b.extend({bgcolor:"#444444",forecolor:"#cccccc",shape:"circle",arrow:"tri",opacity:"0.8",size:40,id:"qs_back_to_top",mode:"set"},e);if(a.image)var c="."+a.id+"{display:block;opacity:"+a.opacity+";position:fixed;right:20px;bottom:20px;z-index:900;cursor:pointer;display:none;";else c="."+a.id+"{display:block;width:"+a.size+"px;height:"+a.size+"px;background:"+a.bgcolor+";opacity:"+a.opacity+
";position:fixed;right:20px;bottom:30px;z-index:900;cursor:pointer;display:none;","circle"==a.shape&&(c+="border-radius:"+a.size+"px;"),c+="}\n."+a.id+":before{content:' ';width: 0;height: 0;border-style: solid;border-width: 0 "+Math.floor(a.size/7.5)+"px "+Math.floor(a.size/6)+"px "+Math.floor(a.size/7.5)+"px;border-color: transparent transparent "+a.forecolor+" transparent;position:absolute;z-index:910;top:50%;left:50%;margin-top:-"+Math.floor(a.size/9)+"px;margin-left:-"+Math.floor(a.size/7.5)+
"px;}","arrow"==a.arrow&&(c+="\n."+a.id+":after{content:' ';width: 0;height: 0;border-style: solid;border-width: 0 "+Math.floor(a.size/7.5)+"px "+Math.floor(a.size/6)+"px "+Math.floor(a.size/7.5)+"px;border-color: transparent transparent "+a.bgcolor+" transparent;position:absolute;z-index:920;top:50%;left:50%;margin-top:-"+Math.floor(a.size/9-4)+"px;margin-left:-"+Math.floor(a.size/7.5)+"px;}");if("initial"==a.mode){b("head").append("<style id='qsBackToTopStyle'>"+c+"</style>");if(!b("#"+a.id).size()){b("body").append("<div id='"+
a.id+"' class='"+a.id+"'></div>");var d=b("#"+a.id)}b(window).on("scroll",function(){500<b(this).scrollTop()?d.fadeIn(300):d.size()&&d.fadeOut(300)});d.click(function(){b(this).css({transition:"none",opacity:a.opacity});b("html,body").stop(!0,!1).animate({scrollTop:0},800,"myEase")});d.hover(function(){b(this).css({transition:"all 0.2s ease",opacity:"1"})},function(){b(this).css({transition:"none",opacity:a.opacity})});b('a[href^="#"]').click(function(){var a=b(this).attr("href").split("#")[1];b("html,body").stop(!0,
!1).animate({scrollTop:b("#"+a).offset().top},1E3,"myEase");return!1})}else setTimeout(function(){b("#qsBackToTopStyle").html(c);a.image&&b("#"+a.id).append("<img src='"+a.image+"'>")},300)}})(jQuery);