此方法為 Bigfa 主題所有，在此，首先感謝作者的分享。效果演示：http://www.nuomens.com/

以下是作者原話

前段時間我在我的部落格加上了一個返回頂部按鈕，本人是對這個功能是沒什麼興趣的，但是和我說的朋友比較多，於是我就弄了一個，考慮到網上類似的外掛或者教程太多，於是我就結合 Canvas 弄了個進度環的效果。大致原理就是根據滾動距離和檔案高度排定滾動百分比然後繪製畫布，百分比數字是用 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′));

為什麼很多人的的圖示和演示的效果不一樣呢，因為作者使用了字型圖示，如果你也使用了字型圖示，則把 content 的內容換成你的圖示後並加上 font-family 即可，然後把函式名改成你自己的，就變成你自己的函式啦。