具体效果当页面向下滑动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'));的颜色参数即可，默认黑色。
评论
13条评论2023 Lv.1
Chrome 109.0.0.0 
Windows 回复
感谢楼主
，好人一生平安
广西百色市 电信
5555555 Lv.1
Chrome 94.0.4606.71 
Windows 回复
666666热乎
湖南省长沙市 电信
JAVA Lv.1
Chrome 94.0.4606.71 
Windows 回复
看一看
山东省 联通
mua123 Lv.1
Chrome 94.0.4606.71 
Windows 回复
666
陕西省西安市 电信
浅夏云-浅夏 Lv.1
Chrome 95.0.4638.69 
Windows 回复
安徽省淮南市 联通
孜然 Lv.1
Chrome 106.0.0.0 
Mac OS X 10.15.7 回复
try啊哈哈哈啊哈
中国 移动
踢足球的肖邦 Lv.1
Chrome 87.0.4280.141 
Android 11 回复
刚才丑八怪
广东省珠海市斗门区 电信
周松松博客 Lv.1
Chrome 97.0.4692.71 
Windows 7 x64 Edition 回复
看一看
福建省 移动
aigozi Lv.1
Chrome 78.0.3904.108 
Windows 回复
效地址，于是就想到了先检查下地址是否有效，
中国 移动
lssun Lv.5 回复
导航栏有用
广东省东莞市 联通