Canvas绘制进度环实现返回顶部功能

当页面下滑动的时候会在页面的右下角出现这个Canvas绘制进度环按钮，点击即可实现返回页面顶部功能。这个效果要比一般的返回按钮有趣。

实现方法：

1、在已经引入jquery的情况下（一般都有），添加以下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() > 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="45" height="45"></canvas><div class="per"></div></div>');    
    var T = bigfa_scroll;    
    T.backToTop(jQuery("#backtoTop"));    
    T.scrollHook(jQuery(window), "#FF5E52");    
});  

---

---

2、css样式，仅供参考：

#backtoTop {  
    background-color:#eee;  
    border-radius:100%;  
    bottombottom:10%;  
    height:48px;  
    position:fixed;  
    rightright:-100px;  
    width:48px;  
    transition:0.5s;  
    -webkit-transition:0.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:#555;  
    cursor:pointer  
}  
.per:before{content:attr(data-percent)}  
.per:hover:before{content:"▲";font-size: 22px;line-height: 0;}

3、如果想修改进度环的颜色，T.scrollHook(jQuery(window), "#FF5E52 里的颜色参数即可。

来自：大发