一款Canvas绘制的进度环实现返回顶部功能

闲鱼怎么觉得标题有点绕口......大概的意思就是当页面下滑动的时候会在页面的右下角出现这个Canvas绘制进度环按钮,点击即可实现返回页面顶部功能。闲鱼是在何敏杰博客看到的,感觉比一般的返回按钮有趣,虽然暂时用不到,还是想扒下来收藏起来,指不定哪天用得上呢,哈哈,大家喜欢的话也可以收藏一下哦,闲鱼觉得效果蛮好的,也新颖。

一款Canvas绘制的进度环实现返回顶部功能

实现方法

1、在已经引入jquery的情况下(一般都有),添加以下js代码

  1. //返回顶部    
  2. var bigfa_scroll = {    
  3.     drawCircle: function(id, percentage, color) {    
  4.         var width = jQuery(id).width();    
  5.         var height = jQuery(id).height();    
  6.         var radius = parseInt(width / 2.20);    
  7.         var position = width;    
  8.         var positionBy2 = position / 2;    
  9.         var bg = jQuery(id)[0];    
  10.         id = id.split("#");    
  11.         var ctx = bg.getContext("2d");    
  12.         var imd = null;    
  13.         var circ = Math.PI * 2;    
  14.         var quart = Math.PI / 2;    
  15.         ctx.clearRect(0, 0, width, height);    
  16.         ctx.beginPath();    
  17.         ctx.strokeStyle = color;    
  18.         ctx.lineCap = "square";    
  19.         ctx.closePath();    
  20.         ctx.fill();    
  21.         ctx.lineWidth = 3;    
  22.         imd = ctx.getImageData(0, 0, position, position);    
  23.         var draw = function(current, ctxPass) {    
  24.             ctxPass.putImageData(imd, 0, 0);    
  25.             ctxPass.beginPath();    
  26.             ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);    
  27.             ctxPass.stroke();    
  28.         }    
  29.         draw(percentage / 100, ctx);    
  30.     },    
  31.     backToTop: function($this) {    
  32.         $this.click(function() {    
  33.             jQuery("body,html").animate({    
  34.                 scrollTop: 0    
  35.             },    
  36.             800);    
  37.             return false;    
  38.         });    
  39.     },    
  40.     scrollHook: function($this, color) {    
  41.         color = color ? color: "#000000";    
  42.         $this.scroll(function() {    
  43.             var docHeight = (jQuery(document).height() - jQuery(window).height()),    
  44.             $windowObj = $this,    
  45.             $per = jQuery(".per"),    
  46.             percentage = 0;    
  47.             defaultScroll = $windowObj.scrollTop();    
  48.             percentage = parseInt((defaultScroll / docHeight) * 100);    
  49.             var backToTop = jQuery("#backtoTop");    
  50.             if (backToTop.length > 0) {    
  51.                 if ($windowObj.scrollTop() > 100) {    
  52.                     backToTop.addClass("button--show");    
  53.                 } else {    
  54.                     backToTop.removeClass("button--show");    
  55.                 }    
  56.                 $per.attr("data-percent", percentage);    
  57.                 bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color);    
  58.             }    
  59.         });    
  60.     }    
  61. }    
  62. jQuery(document).ready(function() {    
  63.     jQuery("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="45" height="45"></canvas><div class="per"></div></div>');    
  64.     var T = bigfa_scroll;    
  65.     T.backToTop(jQuery("#backtoTop"));    
  66.     T.scrollHook(jQuery(window), "#FF5E52");    
  67. });  

2、css样式,可供参考。

  1. #backtoTop {  
  2.     background-color:#eee;  
  3.     border-radius:100%;  
  4.     bottombottom:10%;  
  5.     height:48px;  
  6.     position:fixed;  
  7.     rightright:-100px;  
  8.     width:48px;  
  9.     transition:0.5s;  
  10.     -webkit-transition:0.5s  
  11. }  
  12. #backtoTop.button--show{  
  13.     rightright:10px  
  14. }  
  15. .per{  
  16.     font-size:16px;  
  17.     height:48px;  
  18.     line-height:48px;  
  19.     position:absolute;  
  20.     text-align:center;  
  21.     top:0;  
  22.     width:48px;  
  23.     color:#555;  
  24.     cursor:pointer  
  25. }  
  26. .per:before{content:attr(data-percent)}  
  27. .per:hover:before{content:"▲";font-size22px;line-height: 0;}   
提示

如果想修改进度环的颜色,T.scrollHook(jQuery(window), "#FF5E52 里的颜色参数即可,可以在颜色查询对照表中选择

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:56   其中:访客  38   博主  18

    • 猫鼬博客 猫鼬博客 3 来自天朝的朋友 火狐浏览器 Windows 7 四川省成都市 电信

      闲鱼出品,必属精品。 :smile:

        • 闲鱼 闲鱼 【博主】 WordPress for iOS iPhone & iPad 日本

          @猫鼬博客 这个是网上看到转来的,呵呵

            • 猫鼬博客 猫鼬博客 3 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信

              @闲鱼 对啊,不好的你不会转载。
              好使的才会出现在这里。

          • 很文博客 很文博客 1 来自天朝的朋友 谷歌浏览器 Windows 8.1 广西梧州市 联通

            我的网站模板就是从闲鱼这里找到了,支持闲鱼

            • 豪兔 豪兔 0 来自天朝的朋友 谷歌浏览器 Windows 10 上海市 电信

              博客新手……求问这个JS文件怎么修改啊。我在wordpress后台的外观下面的编辑里面看到我的主题模板有2个JS文件,一个是-custom.js,还一个是modernizr.js,我在custom.JS 文件下把代码全部复制到最后面,结果能看到那个圆环,但是是固定在最底部的……
              它的位置怎么设置呢?另外参考CSS有什么用啊……电脑新手,求指点……

              • 后宫学长 后宫学长 1 来自天朝的朋友 谷歌浏览器 Windows 10 广东省深圳市 电信

                不错,收藏了。

                • 从良未遂 从良未遂 1 来自天朝的朋友 Safari浏览器 Mac OS X 10_12_6 江苏省无锡市 电信

                  我也转载了,但是没搞成功

                    • 闲鱼 闲鱼 【博主】 来自天朝的朋友 QQ浏览器 Windows 7 湖南省常德市 电信

                      @从良未遂 试过了,有效果的,没效果的话我都不会发 :arrow:

                      • 雨小睡 雨小睡 1 来自天朝的朋友 谷歌浏览器 Windows XP 贵州省黔东南州 电信

                        @从良未遂 我也试了,没任何效果。

                      • 柠檬酸 柠檬酸 0 来自天朝的朋友 谷歌浏览器 Windows 8.1 浙江省宁波市 联通

                        很试用,收藏了。

                        • 声学成像仪 声学成像仪 2 来自天朝的朋友 QQ浏览器 Windows XP 江苏省苏州市 电信

                          收藏了,感谢分享!

                          • glfore glfore 2 来自天朝的朋友 QQ浏览器 Windows XP 江苏省苏州市 电信

                            挺好的

                            • WordPress头条 WordPress头条 2 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省宿州市 电信

                              这个不错

                              • 香港服务器 香港服务器 1 来自天朝的朋友 谷歌浏览器 Windows 10 重庆市永川区 /綦江县电信

                                JS中毒。。

                                • 管家婆 管家婆 3 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 联通

                                  js已经无法自拔

                                  • 姜辰 姜辰 4 火狐浏览器 Windows 10 美国 内华达州克拉克县麦斯齐特市Input Output Flood有限公司

                                    如果能按一个↑箭回去更好了

                                    • 我赚啦 我赚啦 0 来自天朝的朋友 火狐浏览器 Windows XP 山东省菏泽市 联通

                                      抱着学习的态度来看看

                                      • 网赚 网赚 0 来自天朝的朋友 谷歌浏览器 Windows 7 河南省郑州市巩义市 联通

                                        代码不错!!!!

                                        • 野兔 野兔 0 来自天朝的朋友 谷歌浏览器 Windows 10 河北省张家口市 电信

                                          很好,抄走了~

                                          • 两法衔接 两法衔接 1 来自天朝的朋友 谷歌浏览器 Windows 8.1 河南省郑州市 联通

                                            确实是个很新颖的功能!!