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

另一个是css,也是一样的加到网站后台或者是main.css文件里面都可以。

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

网站圆型百分比进度条返回顶部功能


css代码


/*返回顶部%css*/
    #backtoTop {
    background-color:rgba(84,82,82,0.15);/*背景颜色,后面0.15是透明度*/
    border-radius:100%;
    bottom:10%;
    /*圆角、下距*/
    height:33px;
    position:fixed;
    right:-100px;
    width:33px;
    transition:0.5s;
    -webkit-transition:0.5s
}
#backtoTop.button--show {
    right:2px
}
/*边距*/
    .per {
    font-size:16px;
    height:30px;
    line-height:30px;
    position:absolute;
    text-align:center;
    top:0;
    width:33px;
    color:#CD0000;
    /*文字颜色*/
    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), "#000000");/*外圈进度条颜色*/
});
/*百分比返回顶部JS,33大小是整个圈圈大小,对应CSS代码也需要修改*/

引用css和js

如果你的网站没有那两个文件的就自己新建,然后代码自己放进去,再然后在网页主题模板底部(footer.php)如下引用就好了!

<script type="text/javascript" src="http://00625.cc/xxx/main.js"></script>
<link rel="stylesheet" href="http://00625.cc/xxx/main.css" />

因为我是小白,还有就是阴雨(英语)盲人,所以代码里面很多注释,自己看下修改,代码也没有压缩自己去压缩一下,不压缩也行下次你自己方便修改!这个应该是全部通用!除非你的网站结构特殊的修改一下就好了!
颜色代码参考

文章目录
文章目录