具体效果当页面向下滑动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条评论思念 Lv.1
Chrome 111.0.0.0 
Windows 回复
河南省郑州市 电信
18045757615 Lv.1
Chrome 108.0.5359.95 
Windows 7 x64 Edition 回复
感谢楼主
，好人一生平安
云南省昭通市 联通
1 Lv.1
Chrome 111.0.0.0 
Windows 回复
很棒！
河南省驻马店市 联通
dadad Lv.1
Chrome 109.0.0.0 
Windows 回复
丢你鸽嘿
广东省佛山市南海区 联通
2546124371 Lv.1
Internet Explorer 
iPhone iOS 16.3 回复
666
广西玉林市 电信
67575 Lv.1
Chrome 87.0.4280.141 
Android 13 回复
收拾书包睡吧睡吧睡吧睡吧
广西 联通
a Lv.1
Firefox 111.0 
Windows 7 x64 Edition 回复
阿猪66
河南省郑州市 联通
优游卒岁 Lv.1
Chrome 101.0.4951.74 
Android 13 回复
你好你好
广西河池市 联通
dhrt Lv.1
Chrome 110.0.0.0 
Windows 回复
感谢楼主表情，好人一生平安感谢楼主表情，好人一生平安感谢楼主表情，好人一生平安
湖北省宜昌市 联通
yifei Lv.1
Chrome 110.0.0.0 
Windows 回复
河南省郑州市 联通