圆形进度条特效返回顶部功能代码

  • A+
所属分类:wp美化

给你网站页面添加一个返回顶部的功能按钮,一般的主题或者是网站都会有这个功能,就是点击右下角的图标就能返回顶部了。

这里分享一个网站返回顶部美化的教程代码,给你的网站添加一个圆形的进度条,根据目前页面距离顶部还有多远,就会显示相对于的百分比信息

效果如下:

圆形进度条特效返回顶部功能代码
随着鼠标滚轮的滑动,或者是根据屏幕当前的网页位置来判定你处于网页中的那个地方,点击一下就会自动的返回顶部。

有没有觉得这个功能很人性化,很装逼,很美观,好了不多说了,让我们自己来看代码吧。

添加网站圆形百分比返回顶部功能按钮

代码一共就两部分,一个是js请加入到你网站的main.js主要的js代码文件里面。

另一个是css,也是一样的加到主题样式表里或者是main.css文件里面都可以。

js代码(加入到模板公共main.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), "#1E90FF");
});

css代码 { 加入到模板的公共main.css或者style.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}

其中的颜色可以自己调节,修改进度环颜色,则修改js底部的

T.scrollHook(jQuery(window,’#000000′)); 的颜色参数即可,默认黑色,

颜色代码参考:点击前往

完成之后立即刷新网页看看吧,手机pc都可以使用,如果开启了cdn记住自己清理下缓存。

代码原自:http://www.wuzuowei.net/7516.html
免责声明:本站所有资源全部收集于互联网部分源文件素材均正版授权,
分享目的仅供大家学习与参考,如有侵权,请联系博主QQ:2016080020我们将及时删除!
本站为分享资源社区,所有资源问题,本站均不提供任何性质的技术支持,需要技术支持的请购买官方商业版!
哇涂网

来句评论吧!

友情提示:{ 评论必须包含中文、禁止纯数字、英文输入 }

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: