SOURCE

var bigfa_scroll = {
    drawCircle: function(id, percentage, color) {
        var width = $(id).width();
        var height = $(id).height();
        var radius = parseInt(width / 2.20);
        var position = width;
        var positionBy2 = position / 2;
        var bg = $(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() {
            $("body,html").animate({
                scrollTop: 0
            },
            800);
            return false;
        });
    },
    scrollHook: function($this, color) {
        color = color ? color: "#000000";
        $this.scroll(function() {
            var docHeight = ($(document).height() - $(window).height()),
            $windowObj = $this,
            $per = $(".percentage"),
            percentage = 0;
            defaultScroll = $windowObj.scrollTop();
            percentage = parseInt((defaultScroll / docHeight) * 100);
            var backToTop = $("#backtoTop");
            if (backToTop.length > 0) {
                if ($windowObj.scrollTop() > 200) {
                    backToTop.addClass("display");
                } else {
                    backToTop.removeClass("display");
                }
                $per.attr("data-percent", percentage);
                bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color);
            }
        });
    }
}
$(document).ready(function() {
    var T = bigfa_scroll,
        totop = $("#backtoTop"),
        percent = totop.children(".percentage");
    T.backToTop(totop);
    T.scrollHook($(window), "#99ccff");
    percent.hover(function(){
        percent.addClass("fa-long-arrow-up");
        percent.css({"font-family":"FontAwesome"});
    },function(){
        percent.removeClass("fa-long-arrow-up");
        percent.removeAttr("style");
    });
});

<div id="btn" title="btn">
      <div id="backtoTop" data-action="gototop" title="backtoTop">
      <div id="gotoBottom" data-action="gotobottom" title="gotobottom"><a href="#bottom" class="Bottom"></a>
        <canvas id="backtoTopCanvas" width="48" height="48"></canvas>
        <div class="percentage"></div>
    </div>
        
        <div class="pie">
          <canvas id="backtoTopCanvas" width="48" height="48"></canvas>
        <div class="percentage"></div>
        </div>
        <script>
        </script>
        
<i class="fa fa-arrow-down" aria-hidden="true" style="position:absoulte;top:0;"></i>
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
        <i class="fa fa-chevron-up" aria-hidden="true"></i>

#btn{
  display:inline-block;
  background-color:#eee;
  border-radius:100%;
  width:48px;
  height:48px;
  position:relative;
  float:right;
  right:3%;
  z-index:99;
  -webkit-transition: 0.5s;
       -moz-transition: 0.5s;
            transition: 0.5s;
    &.display {right: 10px;}
    +mobile() {
    display: block;
    position:right;
  }
  +tablet() {
    display: block;
    position:right;
  }
}

/* 自己新增的backtotop */
#backtoTop {
  height:0;
    background-color: #eee;
    border-radius:24px 24px 0 0;
    bottom: 5%;
    height: 24px;
    width: 48px;
    position:relative;
    float:right;
    right:3%;
    //z-index: 99;
    -webkit-transition: 0.5s;
       -moz-transition: 0.5s;
            transition: 0.5s;
    cursor: pointer;
  &:hover:before{
    content:"↑";font-size:20px;
  }
    &.display {right: 10px;}
    +mobile() {
    display: block;
    position:right;
  }
  +tablet() {
    display: block;
    position:right;
  }
}
#gotoBottom{
  display:block;
  height:0;
  background-color:#eee;
  border-radius:0 0 24px 24px;
  //bottom:5%;
  height:24px;
  weight:48px;
  position:aosoulte;
  bottom:50%;
  float:right;
  right:3%;
  //z-index:99;
  -webkit-transition: 0.5s;
       -moz-transition: 0.5s;
            transition: 0.5s;
  cursor: pointer;
  &:hover:before{
    content:"↓";font-size:20px;
  }
    &.display {right: 10px;}
    +mobile() {
    display: block;
    position:right;
  }
  +tablet() {
    display: block;
    position:right;
  }
}
.percentage {
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 48px;
    color: #555;
    cursor: pointer;
    &:before {content:attr(data-percent);color:#ff0000;}
  	&:hover:before {
        content:"↑";font-size:30px;
    }
    
    +mobile() {
    display: block;
    position:right;
  }
  +tablet() {
    display: block;
    position:right;
  }
}


.pie{
  width:150px;
  height:150px;
  //display:block;
  border-radius:50%;
  background-color:orange;
  position:absolute;
	//margin:0 auto;
  text-align:center;
  top:100px;
  right:200px;
  overflow:hidden;
  display:inline-block;
}
.pie::before{
  overflow:hidden;
  position:relative;
  content:'';
  display:block;
  height:50%;
  border-radius:150px 150px 0 0;
  background:blue;
  &:hover:before{
    content:"↑";font-size:20px;
  }
}
.pie::after{
  overflow:hidden;
  position:relative;
  //top:50%;
  content:'';
  display:block;
  //margin-top:50%;
  height:50%;
  border-radius:0 0 150px 150px;
  background:red;
  &:hover:before{
    content:"↑";font-size:30px;
  }
}