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

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

第一步:让网站加载jQuery

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

Windows性能监视器的使用技巧
  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. });

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

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

分享到: 生成海报
avatar

热门文章

  • 一对一资讯网 为您提供可靠的服务

    一对一主机系统飞蝌云计算
    登录一对一资讯平台  

    登录

    忘记密码 ?