免插件jQuery+css实现返回顶部功能

看见不少的回到顶部功能的代码实现，考虑到网上类似的插件或者教程太多，于是就结合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即可，然后把函数名改成你自己的，就变成你自己的函数啦。