张力-实战网络营销导师
专注于网络营销策划+Wordpress建站,只做有思想的高价值网站,只提供有担当的营销服务!
文章476浏览1339622本站已运行606

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

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

右侧动态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. });  

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

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

您还未添加分享代码,请到主题选项中,添加百度分享代码!

张力

广告
发表我的评论
取消评论
表情 签到
流汗坏笑撇嘴大兵流泪发呆抠鼻吓到偷笑得意呲牙亲亲疑问调皮可爱白眼难过愤怒惊讶鼓掌

Hi,您需要填写昵称和邮箱!

(2)个小伙伴在吐槽
  1. 姚兵
    姚兵   Google Chrome 55.0.2883.87   Windows 7
    2018-05-03 11:33

    不错,感谢分享

  2. 龙笑天
    龙笑天   Firefox 28.0   Windows 7
    2016-09-23 17:20

    非常感谢,回去就试试~

隐藏边栏