wordpress的Canvas实现进度环返回顶部按钮

今天在一个网站上扒下了一个进度环返回顶部的按钮，感觉很有意思，比知更鸟自带的高大上的多，所以分享出来。

图片：

1.js代码

将以下代码保存到jindu.php文件中，然后上传到主题的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(‘

’);

    var T = bigfa_scroll;

    T.backToTop(jQuery(“#backtoTop”));

    T.scrollHook(jQuery(window), “#d57a21”);

});

2.调用js文件

在header.php中的添加以下代码：

<script src=“/js/jindu.js”>

3.添加样式

将以下代码添加到style.css中即可：

#backtoTop{background-color:#eee;border-radius:100%;bottombottom:10%;height:48px;position:fixed;rightright:-100px;width:48px;transition:.5s;-webkit-transition:.5s}#backtoTop.button–show{rightright:10px}.per{font-size:16px;height:48px;line-height:48px;position:absolute;text-align:center;top:0;width:48px;color:#000;cursor:pointer}.per:before{content:attr(data-percent)}.per:hover:before{content:“↑”;font-size:20px}

好了，大功告成，简单的教程相信大家都可以看懂吧~~