具体效果当页面向下滑动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'));的颜色参数即可，默认黑色。
评论
20条评论爱学习的小茗 Lv.1
Chrome 141.0.0.0 
Windows 回复
我要学习！
甘肃省兰州市 兰州大学
PON Lv.1
Sogou Explorer 
Windows 7 x64 Edition 回复
感谢楼主
山东省济南市 联通
小刘 Lv.1
Chrome 122.0.6261.95 
Windows 回复
感谢楼主表情，好人一生平安
四川省绵阳市 电信
need login Lv.1
Chrome 119.0.6045.160 
Windows 回复
感谢楼主
，好人一生平安
山东省淄博市 电信
大发发大发发 Lv.1
Chrome 86.0.4240.198 
Windows 回复
大发发
中国 移动
太阳风 Lv.1
Firefox 115.0 
Windows 7 x64 Edition 回复
一直在学习
河南省南阳市 电信
超规格 Lv.1
Chrome 79.0.3945.79 
Windows 7 x64 Edition 回复
我看看呢
湖北省十堰市 电信
怪兽 Lv.1
Chrome 113.0.0.0 
Windows 回复
股份大股东是VS
陕西省榆林市米脂县 电信
海纳百川 Lv.1
Chrome 109.0.0.0 
Windows 回复
手术室
新疆哈密地区 电信
明了 Lv.1
Chrome 86.0.4240.198 
Windows 回复
正是需要的，求下载
重庆市云阳县 电信