<!DOCTYPE html>
<!--必须声明-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--[if lt IE 9]>
<script>(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);</script>
<![endif]-->
<style>
#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: 22px;line-height: 0;}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body style="height:10000px;" class="single single-post postid-113 single-format-standard">
<script>
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() > 100) {
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), "#FF5E52");
});
</script>
</body>
</html>效果
附件：