backtop debug

~ function() {
     function Back2top(config) {
         this.config = config;
         this.init();
     }
     // 创建构造函数Back2top,在它的原型上添加init属性 
     Back2top.prototype.init = function() {
         var btn = document.createElement("div"),
             time = null;
         btn.style.position = "fixed";
         btn.style.backgroundColor = this.config.bgcolor;
         btn.style.color = this.config.color;
         btn.style.bottom = "1.5em";
         btn.style.right = "1.5em";
         btn.style.visibility = "hidden";
         btn.style.zIndex = "9998";
         btn.innerText = "回到顶部";
         btn.style.padding = "1em";
         btn.style.width = "2em";
         btn.style.lineHeight = "1.2em";
         btn.style.borderRadius = ".5em";
         btn.style.opacity = ".6";
         btn.style.cursor = "default";
         // 监测使用设备是手机还是pc
         var userAgent = window.navigator.userAgent,
             isMoblie = (!!userAgent.match(/iphone/i)) || (!!userAgent.match(/ipad/i)) || (!!userAgent.match(/Android/i));
          document.body.appendChild(btn);
         // 如果是移动端就给fontsize重新赋值,如果是pc端就监测它的视口宽度,在小于768时,改变字体大小
         if (isMoblie) {
             btn.style.fontSize = document.documentElement.clientWidth / 25 + "px";
         } else {
             btn.style.fontSize = document.documentElement.clientWidth < 768 ? "12px" : "14px";
             window.onresize = function() {
                 btn.style.fontSize = document.documentElement.clientWidth < 768 ? "12px" : "14px";
             };
         }
         // 监测滚动情况
         window.onscroll = function() {
             var objH = document.documentElement.clientHeight;
             btn.style.visibility = document.body.scrollTop >= objH ? "visible" : "hidden";


         };
         // 回到顶部按钮点击,卷去内容逐渐减小,当到顶部时clear掉
         btn.onclick = function() {
             time = setInterval(function() {
                 document.body.scrollTop = document.body.scrollTop - document.body.scrollTop / 6;
                 if (document.body.scrollTop <= 0) {
                     clearInterval(time);
                 }
             }, 50);
         };
     };
     // 监听在文档全部加载完,将构造函数Back2top实例化;
     document.addEventListener('DOMContentLoaded', function() {
         var back2top = new Back2top({
             bgcolor: "#777",
             color: "#fff"
         });
     });
 }();
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值