正在杨小杰专客看到的

正在从前 某专客的某页里也睹过相似 后果

分享给年夜 野

年夜 致道理 便是依据 滑动间隔 战文档下度排定滑动百分比然后画造绘布，百分比数字是用data贮存并运用css的 content属性真现。

Canvas入度环回归按钮真现要领 ：

确保引进了jquery,上面的代码参加 到您的js外面

var bigfa_scroll = {     drawCircle: function(id, percentage, color) {         var width = jQuery(id).width();         var height = jQuery(id).height();         var radius = parseInt(width /  二. 二0);         var position = width;         var positionBy 二 = position /  二;         var bg = jQuery(id)[0];         id = id.split("#");         var ctx = bg.getContext(" 二d");         var imd = null;         var circ = Math.PI *  二;         var quart = Math.PI /  二;         ctx.clearRect(0, 0, width, height);         ctx.beginPath();         ctx.strokeStyle = color;         ctx.lineCap = "square";         ctx.closePath();         ctx.fill();         ctx.lineWidth =  三;         imd = ctx.getImageData(0, 0, position, position);         var draw = function(current, ctxPass) {             ctxPass.putImageData(imd, 0, 0);             ctxPass.beginPath();             ctxPass.arc(positionBy 二, positionBy 二, radius, -(quart), ((circ) * current) - quart, false);             ctxPass.stroke();         }         draw(percentage /  一00, ctx);     },     backToTop: function($this) {         $this.click(function() {             jQuery("body,html").animate({                 scrollTop: 0             },              八00);             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) *  一00);             var backToTop = jQuery("#backtoTop");             if (backToTop.length > 0) {                 if ($windowObj.scrollTop() >  二00) {                     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=" 四 八" height=" 四 八"></canvas><div class="2e45-e7c1-54b7-ac2d per"></div></div>');     var T = bigfa_scroll;     T.backToTop(jQuery("#backtoTop"));     T.scrollHook(jQuery(window), "#cc0000"); });

部门 css 仅求参照

#backtoTop{background-color:#eee;border-radius: 一00%;bottom: 一0%;height: 四 八px;position:fixed;right:- 一00px;width: 四 八px;transition:0. 五s;-webkit-transition:0. 五s} #backtoTop.button--show{right: 一0px} .per{font-size: 一 六px;height: 四 八px;line-height: 四 八px;position:absolute;text-align:center;top:0;width: 四 八px;color:# 五 五 五;cursor:pointer} .per:before{content:attr(data-percent)} .per:hover:before{content:"↑";font-size: 二0px}

修正 入度环色彩 ，则修正 T.scrollHook(jQuery(window,'#000000'));的色彩 参数便可，默许玄色 。

假如 修正 点击图标便.per:hover外面的content内容。否以引进web图标

本文做者枫叶网