具体效果当页面向下滑动15%的时候回在页面的右下角出现这个按钮，并且具有Canvas绘制进度环的效果。大致原理就是根据滚动距离和文档高度排定滚动百分比然后绘制画布，百分比数字是用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 / 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'));的颜色参数即可，默认黑色。
评论
172条评论255 Lv.1
Android Webkit 
Android 9 回复
新人报道
学习一下
中国 移动
99995 Lv.1
Chrome 94.0.4606.71 
Windows 回复
看看源码
河北省 移动
信明宇信明宇 Lv.1
Chrome 80 
Android 10 回复
嘻嘻嘻
江苏省 移动
123456789 Lv.1
Android Webkit 4.0 
Android 12 回复
看看
广西南宁市 电信
VIP客服 Lv.1
Android Webkit 4.0 
Android 10 回复
666哈哈哈哈
广东省东莞市 电信
富商大贾好地方 Lv.1
Sogou Explorer 
Windows 7 x64 Edition 回复
撒而非糖果色爱国设若干
广东省广州市 移动GSM/TD-SCDMA/LTE全省共用出口
腾讯视频 Lv.3
Chrome 103.0.0.0 
Windows 回复
试试看看
贵州省贵阳市小河区 电信
卡斯特罗 Lv.1
Chrome 103.0.0.0 
Windows 回复
66666666666666666666666可以
山东省济南市 移动
情怀 Lv.1
Chrome 103.0.5060.114 
Windows 回复
1111111111111错不错，味道
广东省深圳市 联通
挂机脚本网fylmq.com Lv.1
Chrome 103.0.0.0 
Windows 回复
不错不错，味道好极了
天津市 联通