这个返回顶部的功能，我们总共需要用到CSS和JS，下面是操作步骤：
第一步：让网站加载jQuery
如果我们网站已经加载了jquery的话，就可以不需要添加；如果没有的话，我建议可以添加一个百度jquery的CDN，毕竟百度速度挺快的，而且还稳定！
- <script src=“http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js” type=“text/javascript”></script>
第二步：加入CSS代码
我们可以把以下CSS代码加入到你的样式表或者网站中去：
- #backtoTop{position:fixed;right:-100px;bottom:0;width:45px;height:45px;border-radius:100%;background-color:#333d46;-webkit-transition:.5s;transition:.5s}
- #backtoTop.button–show{right:0}
- .per{position:absolute;top:0;width:45px;height:45px;color:#fff;text-align:center;font-size:16px;line-height:45px;cursor:pointer}
- .per:before{content:attr(data-percent)}
- .per:hover:before{content:“▲”;font-size:22px;line-height:0;top:20px;position:absolute;right:10px;}
第三步：加入js代码
这段JS代码是来至大发同学的，非常感谢他。我们将以下JS代码放入到网站的其他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 = 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”);
- });
一切完成！你再看看是不是网站上就多了一个漂亮的返回顶部。
所有流程和代码都在这里，喜欢的朋友可以直接拿去用！有心的朋友可以帮忙转载，但请千万一定要留下版权信息，咱们版权意识还是要有的嘛！
