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

　　今天在一个网站上扒下了一个进度环返回顶部的按钮，感觉很有意思，比知更鸟自带的高大上的多，所以分享出来。
　　图片：
　　1。js代码
　　将以下代码保存到jindu。php文件中，然后上传到主题的js文件夹中：
　　｛
　　drawCircle：function（id，percentage，color）｛
　　jQuery（id）。width（）；
　　jQuery（id）。height（）；
　　parseInt（2。20）；
　　
　　positionBy22；
　　jQuery（id）〔0〕；
　　id。split（“”）；
　　bg。getContext（“2d”）；
　　
　　Math。PI2；
　　Math。PI2；
　　ctx。clearRect（0，0，width，height）；
　　ctx。beginPath（）；
　　ctx。strokeS
　　ctx。lineC“square”；
　　ctx。closePath（）；
　　ctx。fill（）；
　　ctx。lineW3；
　　ctx。getImageData（0，0，position，position）；
　　function（current，ctxPass）｛
　　ctxPass。putImageData（imd，0，0）；
　　ctxPass。beginPath（）；
　　ctxPass。arc（positionBy2，positionBy2，radius，（quart），（（circ）current）quart，false）；
　　ctxPass。stroke（）；
　　｝
　　draw（100，ctx）；
　　｝，
　　backToTop：function（this）｛
　　this。click（function（）｛
　　jQuery（“body，html”）。animate（｛
　　scrollTop：0
　　｝，
　　800）；
　　
　　｝）；
　　｝，
　　scrollHook：function（this，color）｛
　　？color：“000000”；
　　this。scroll（function（）｛
　　docH（jQuery（document）。height（）jQuery（window）。height（）），
　　windowOthis，
　　jQuery（“。per”），
　　0；
　　defaultSwindowObj。scrollTop（）；
　　parseInt（（defaultSdocHeight）100）；
　　backToTjQuery（“backtoTop”）；
　　（backToTop。0）｛
　　（windowObj。scrollTop（）200）｛
　　backToTop。addClass（“buttonshow”）；
　　｝｛
　　backToTop。removeClass（“buttonshow”）；
　　｝
　　per。attr（“datapercent”，percentage）；
　　bigfascroll。drawCircle（“backtoTopCanvas”，percentage，color）；
　　｝
　　｝）；
　　｝
　　｝
　　jQuery（document）。ready（function（）｛
　　jQuery（“body”）。append（‘
　　’）；
　　T
　　T。backToTop（jQuery（“backtoTop”））；
　　T。scrollHook（jQuery（window），“d57a21”）；
　　｝）；
　　2。调用js文件
　　在header。php中的添加以下代码：
　　src“jsjindu。js”
　　3。添加样式
　　将以下代码添加到style。css中即可：
　　backtoTop｛backgroundcolor：borderradius：100；bottombottom：10；height：48position：rightright：100width：48transition：。5s；webkittransition：。5s｝backtoTop。buttonshow｛rightright：10px｝。per｛fontsize：16height：48lineheight：48position：textalign：top：0；width：48color：000；cursor：pointer｝。per：before｛content：attr（datapercent）｝。per：hover：before｛content：“”；fontsize：20px｝
　　好了，大功告成，简单的教程相信大家都可以看懂吧