WordPress-OneNav主题美化：网站圆型百分比进度条返回顶部功能代码

两个代码<css,js>

随着鼠标滚轮的滑动，根据屏幕当前的网页位置来判定你处于网页中的百分比那个地方，鼠标点击一下（hover获取焦点）就会显示一个回顶部提示文字并自动的返回顶部（#）。
为什么我要说明（hover获取焦点），因为有的网友和我说手机浏览器点击返回顶部后，再往下浏览拖动不会显示回来百分比，也正是因为（hover获取焦点）方式，所以需要你再次随便点击一下网页的其它部分就会显示回来了，不过没关系，正常的阅读者应该不会无聊到纠结或者玩这个百分比返回顶部吧！

/*返回顶部%css*/
#backtoTop {
background-color:var(--background);/*背景颜色*/
border-radius:100%;
bottom:5%;
/*圆角、下距*/
height:33px;
position:fixed;
right:-100px;
width:33px;
transition:0.5s;
-webkit-transition:0.5s
}
#backtoTop.button--show {
right:33px
}
/*边距*/
.per {
font-size:16px;
height:30px;
line-height:30px;
position:absolute;
text-align:center;
top:0;
width:33px;
color:#F05454;
/*文字颜色*/
cursor:pointer
}
.per:before {
content:attr(data-percent)
}
.per:hover:before {
content:"↑";
font-size:15px
}
/*文字大小*/

JS

/*百分比返回顶部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 = 2; //转动圈线条大小
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="33" height="33"></canvas><div class="per"></div></div>');
var T = bigfa_scroll;
T.backToTop(jQuery("#backtoTop"));
T.scrollHook(jQuery(window), "#009f5d");/*外圈进度条颜色*/
});
/*百分比返回顶部JS，33大小是整个圈圈大小,对应CSS代码也需要修改*/