右侧动态CSS+JS的返回顶部功能代码

2条回复

有博友在博客上跟张力说我网站右侧的返回顶部功能代码挺漂亮的，他也很喜欢，希望我能分享出来。今天呢？我也就把这个返回顶部的功能代码分享给大家，喜欢的朋友可以自己去手动折腾一下，毕竟生命不息，折腾不止！

右侧动态CSS+JS的返回顶部功能代码

这个返回顶部的功能，我们总共需要用到CSS和JS，下面是操作步骤：

第一步：让网站加载jQuery

如果我们网站已经加载了jquery的话，就可以不需要添加；如果没有的话，我建议可以添加一个百度jquery的CDN，毕竟百度速度挺快的，而且还稳定！

  1. <script src=“http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js” type=“text/javascript”></script>  

第二步：加入CSS代码

我们可以把以下CSS代码加入到你的样式表或者网站中去：

  1. #backtoTop{position:fixed;right:-100px;bottom:0;width:45px;height:45px;border-radius:100%;background-color:#333d46;-webkit-transition:.5s;transition:.5s}  
  2. #backtoTop.button–show{right:0}  
  3. .per{position:absolute;top:0;width:45px;height:45px;color:#fff;text-align:center;font-size:16px;line-height:45px;cursor:pointer}  
  4. .per:before{content:attr(data-percent)}  
  5. .per:hover:before{content:“▲”;font-size:22px;line-height:0;top:20px;position:absolute;right:10px;}  

第三步：加入js代码

这段JS代码是来至大发同学的，非常感谢他。我们将以下JS代码放入到网站的其他JS文件里面，也可以自己新建一个JS文件，把这段代码放进去，这个就取决于大家自己的选择了。

  1. //返回顶部  
  2. var bigfa_scroll = {  
  3.     drawCircle: function(id, percentage, color) {  
  4.         var width = jQuery(id).width();  
  5.         var height = jQuery(id).height();  
  6.         var radius = parseInt(width / 2.20);  
  7.         var position = width;  
  8.         var positionBy2 = position / 2;  
  9.         var bg = jQuery(id)[0];  
  10.         id = id.split(“#”);  
  11.         var ctx = bg.getContext(“2d”);  
  12.         var imd = null;  
  13.         var circ = Math.PI * 2;  
  14.         var quart = Math.PI / 2;  
  15.         ctx.clearRect(0, 0, width, height);  
  16.         ctx.beginPath();  
  17.         ctx.strokeStyle = color;  
  18.         ctx.lineCap = “square”;  
  19.         ctx.closePath();  
  20.         ctx.fill();  
  21.         ctx.lineWidth = 3;  
  22.         imd = ctx.getImageData(0, 0, position, position);  
  23.         var draw = function(current, ctxPass) {  
  24.             ctxPass.putImageData(imd, 0, 0);  
  25.             ctxPass.beginPath();  
  26.             ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) – quart, false);  
  27.             ctxPass.stroke();  
  28.         }  
  29.         draw(percentage / 100, ctx);  
  30.     },  
  31.     backToTop: function($this) {  
  32.         $this.click(function() {  
  33.             jQuery(“body,html”).animate({  
  34.                 scrollTop: 0  
  35.             },  
  36.             800);  
  37.             return false;  
  38.         });  
  39.     },  
  40.     scrollHook: function($this, color) {  
  41.         color = color ? color: “#000000”;  
  42.         $this.scroll(function() {  
  43.             var docHeight = (jQuery(document).height() – jQuery(window).height()),  
  44.             $windowObj = $this,  
  45.             $per = jQuery(“.per”),  
  46.             percentage = 0;  
  47.             defaultScroll = $windowObj.scrollTop();  
  48.             percentage = parseInt((defaultScroll / docHeight) * 100);  
  49.             var backToTop = jQuery(“#backtoTop”);  
  50.             if (backToTop.length > 0) {  
  51.                 if ($windowObj.scrollTop() > 100) {  
  52.                     backToTop.addClass(“button–show”);  
  53.                 } else {  
  54.                     backToTop.removeClass(“button–show”);  
  55.                 }  
  56.                 $per.attr(“data-percent”, percentage);  
  57.                 bigfa_scroll.drawCircle(“#backtoTopCanvas”, percentage, color);  
  58.             }  
  59.         });  
  60.     }  
  61. }  
  62. jQuery(document).ready(function() {  
  63.     jQuery(“body”).append(‘<div id=“backtoTop” data-action=“gototop”><canvas id=“backtoTopCanvas” width=“45” height=“45”></canvas><div class=“per”></div></div>’);  
  64.     var T = bigfa_scroll;  
  65.     T.backToTop(jQuery(“#backtoTop”));  
  66.     T.scrollHook(jQuery(window), “#FF5E52”);  
  67. });  

一切完成！你再看看是不是网站上就多了一个漂亮的返回顶部。

所有流程和代码都在这里，喜欢的朋友可以直接拿去用！有心的朋友可以帮忙转载，但请千万一定要留下版权信息，咱们版权意识还是要有的嘛！

《右侧动态CSS+JS的返回顶部功能代码》有 2 个想法

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注