的实现进度环返回顶部按钮

　　今天在一个网站上扒下了一个进度环返回顶部的按钮，感觉很有意思，比知更鸟自带的高大上的多，所以分享出来。
　　图片：
　　1.js代码
　　将以下代码保存到jindu.php文件中，然后上传到主题的js文件夹中：
　　varbigfa_scroll={
　　drawCircle:function(id,percentage,color){
　　varwidth=jQuery(id).width();
　　varheight=jQuery(id).height();
　　varradius=parseInt(width/2.20);
　　varposition=width;
　　varpositionBy2=position/2;
　　varbg=jQuery(id)[0];
　　id=id.split(＂#＂);
　　varctx=bg.getContext(＂2d＂);
　　varimd=null;
　　varcirc=Math.PI*2;
　　varquart=Math.PI/2;
　　ctx.clearRect(0,0,width,height);
　　ctx.beginPath();
　　ctx.strokeStyle=color;
　　ctx.lineCap=＂square＂;
　　ctx.closePath();
　　ctx.fill();
　　ctx.lineWidth=3;
　　imd=ctx.getImageData(0,0,position,position);
　　vardraw=function(current,ctxPass){
　　ctxPass.putImageData(imd,0,0);
　　ctxPass.beginPath();
　　ctxPass.arc(positionBy2,positionBy2,radius,-(quart),((circ)*current)–quart,false);
　　ctxPass.stroke();
　　}
　　draw(percentage/100,ctx);
　　},
　　backToTop:function($this){
　　$this.click(function(){
　　jQuery(＂body,html＂).animate({
　　scrollTop:0
　　},
　　800);
　　returnfalse;
　　});
　　},
　　scrollHook:function($this,color){
　　color=color?color:＂#000000＂;
　　$this.scroll(function(){
　　vardocHeight=(jQuery(document).height()–jQuery(window).height()),
　　$windowObj=$this,
　　$per=jQuery(＂.per＂),
　　percentage=0;
　　defaultScroll=$windowObj.scrollTop();
　　percentage=parseInt((defaultScroll/docHeight)*100);
　　varbackToTop=jQuery(＂#backtoTop＂);
　　if(backToTop.length>0){
　　if($windowObj.scrollTop()>200){
　　backToTop.addClass(＂button–show＂);
　　}else{
　　backToTop.removeClass(＂button–show＂);
　　}
　　$per.attr(＂data-percent＂,percentage);
　　bigfa_scroll.drawCircle(＂#backtoTopCanvas＂,percentage,color);
　　}
　　});
　　}
　　}
　　jQuery(document).ready(function(){
　　jQuery(＂body＂).append(‘
　　<div id=＂＂backtoTop＂＂ data-action=＂＂gototop＂＂><canvas id=＂＂backtoTopCanvas＂＂ width=＂＂48＂＂ height=＂＂48＂＂></canvas><div class=＂＂per＂＂></div></div>’);
　　varT=bigfa_scroll;
　　T.backToTop(jQuery(＂#backtoTop＂));
　　T.scrollHook(jQuery(window),＂#d57a21＂);
　　});
　　2.调用js文件
　　在header.php中的添加以下代码：
　　&lt;scriptsrc=＂<!--?php echo=＂＂-->/js/jindu.js＂&gt;<!--?php-->
　　3.添加样式
　　将以下代码添加到style.css中即可：
　　#backtoTop{background-color:#eee;border-radius:100%;bottombottom:10%;height:48px;position:fixed;rightright:-100px;width:48px;transition:.5s;-webkit-transition:.5s}#backtoTop.button–show{rightright:10px}.per{font-size:16px;height:48px;line-height:48px;position:absolute;text-align:center;top:0;width:48px;color:#000;cursor:pointer}.per:before{content:attr(data-percent)}.per:hover:before{content:＂↑＂;font-size:20px}
　　好了，大功告成，简单的教程相信大家都可以看懂吧~~