大发博客效果之返回顶部大致原理就是根据

大发博客效果之返回顶部大致原理就是根据滚动距离和文档高度排定滚动百分比然后绘制画布，百分比数字是用data储存并使用css的 content属性实现。实现方法确保引入了 jquery ,下面的代码加入到你的js文件中 var bigfa scroll = { drawCircle: function id, percentage, color { var width = jQuery id .width ; var height = jQuery id .height ; var radius = parseInt width / 2.20 ; var position = width; var positionBy2 = position / 2; var bg = jQuery id 0 ; id = id.split " " ; var ctx = bg.getContext "2d" ; var imd = null; var circ = Math.PI 2; var quart = 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 ; var draw = 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 ; return false; } ; }, scrollHook: function $this, color { color = color ? color: " 000000"; $this.scroll function { var docHeight = jQuery document .height - jQuery window .height , $windowObj = $this, $per = jQuery ".per" , percentage = 0; defaultScroll = $windowObj.scrollTop ; percentage = parseInt defaultScroll / docHeight 100 ; var backToTop = 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>’ ; var T = bigfa scroll; T.backToTop jQuery " backtoTop" ; T.scrollHook jQuery window , " cc0000" ; } ; 参考css： backtoTop{background-color: eee;border-radius:100%;bottom:10%;height:48px;position:fixed;right:-100px;width:48px;transition:0.5s;-webkit-transition:0.5s} backtoTop.button--show{right:10px} .per{font-size:16px;height:48px;line-height:48px;position:absolute;text-align:center;top:0;width:48px;color: 555;cursor:pointer} .per:before{content:attr data-percent } .per:hover:before{content:"↑";font-size:20px} 修改进度环颜色，则修改 T.scrollHook jQuery window,’ 000000’ ; 的颜色参数即可，默认黑色。超?efly 评论：哦 Wings Blog 评论：这么长{smile:43} 吴尼玛评论： @小智：{smile:2}稍后分享小智评论： {smile:36}没有网站进度条的吗

大发博客效果之返回顶部 大致原理就是根据 - Assbbs

大发博客效果之返回顶部大致原理就是根据 - Assbbs