一款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:

目前评论:51   其中:访客  34   博主  17

    • 豪兔 豪兔 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:

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

              很试用,收藏了。