回到顶部继承版

面向对象的三大小技巧：

• this永远是实例，所有的操作都是给this添加属性和方法
• 全局变量都是实例的私有属性
• 不要函数嵌套函数，全局的函数都是原型上面公有的方法，实例调用
  回调：把函数的定义阶段作为普通参数传递，回调函数中的this指向window，
  箭头函数中的this指向父级
  引用一个类，使用的时候要创建一个实例对象
  继承父类身上的属性和方法
  给元素身上绑定事件：on('事件名',callback回调函数)，绑定多个事件都可以执行，只要触发了事件的执行，解除绑定事件：off('事件名'，有名的函数名)
  事件的绑定都是异步的

创建父类BaseToTop 回到顶部

class BaseToTop{
// 构造函数才参数传在constructor上面
       constructor(opt){
             // 要是忘记传入opt对象的时候
            opt=opt||{};
              this.ele=opt.ele;
               this.timer=null;
              this.step=null;
             this.bOk=false; // 随时停下的状态判断，Boolean值
              this.duration=opt.duration || 1000;
                this.clickEvent();   // 点击事件，回到顶部
     }
   clickEvent(){
// 给元素身上绑定点击事件
           this.ele.on('click',()=>{
                 // 计算步长
                var target=$(window).scrollTop();
                 var duration=this.duration;
                 var interval=30;
                this.step=target/duration*interval;
                 // 使用this之前一定要提醒自己this是什么
                 this.timer=setInterval(()=>{
                         // 移动到顶部 最好不要函数嵌套函数  定时器里面
                       this.moveTop();
                   },interval);
             })
     }
       moveTop(){
                // 每次获取到最新的位置
                var curTop=$(window).scrollTop();
               // 最新的位置上面减去step
                    curTop-=this.step; // 这个this是谁取决你函数调用的时候this是谁
          if(curTop<=0){
                   $(window).scrollTop(0); // 设置为0
                   clearInterval(this.timer); // 关闭定时器
                    this.scrollEvent&&this.scrollEvent(); // 再次滚动的时候出现回到顶部的按钮
                  return; // 阻止程序执行
           }
               // 重新赋值最新的位置
              $(window).scrollTop(curTop);
              this.bOk=false; // 点击了按钮设置Boolean值为false
          }
 }

创建一个子类继承父类，回到顶部按钮开始隐藏，超过一屏显示

class ShowOrHide extends BaseToTop{
   //  要继承需要传入参数 opt  先继承父类原有的 父类如果有参数，就必须写参数
         constrouctor(opt){
               super(opt);
this.name=null;
 this.scrollEvent();
      }
// 超过一屏才显示按钮
    scrollEvent(){
// 绑定事件，方便解除
           $(window).on('scroll',this.name=()=>{
                    
                     // 超过一屏显示
if($(window).scrollTop()>$(window).height){
                      this.ele.show();
                }else{
                           this.ele.hide();
                   }
              })
       }
}

创建子类继承父类，按钮点击后立即隐藏

class quickHide extends ShowOrHide{
// 父类有参数，子类继承父类就要有参数
       constructor(opt){
            super(opt);
            this.btnHide();
      }
    
      btnHide(){
             this.ele.on('click',()=>{
                       this.ele.hide(); // 当前按钮隐藏
                       $(window).off('scroll',this.name); // 解除scroll事件的绑定
            }) 
      }
  }

空白处点击随时停下不滚动

class stopAnytime extends ShowOrHide{
        constructor(opt){
               super(opt);
this.stop();
       }   
stop(){
// 给scroll添加事件：对bOk的判断；在定时器里面设置bok为false
       $(window).on('scroll',()=>{
                if(this.bOk) clearInterval(this.timer); // 关闭定时器就是停止滚动
                 this.bOk=true;
     })   
 }
   }

创建实例

// 基础版的回到顶部
  var toTop=new BaseToTop({
              ele:$('a'),
              duration:700 
   })
// 按钮回到顶部隐藏，滚动显示
var toTop2=new ShowOrHide({
              ele:$('a'),
              duration:700 
   })
// 按钮点击立马隐藏
var toTop3=new quickHide({
              ele:$('a'),
              duration:700 
   })
// 随时隐藏
var toTop4=new stopAnytime({
              ele:$('a'),
              duration:700 
   })

HTML代码

 <style>
        body,html{
            width:100%;
            height:300%;
            background: -webkit-linear-gradient(top,lightpink,lightgreen,lightblue,darkolivegreen);
        }
        a{
            width: 80px;
            height: 80px;
            border-radius: 40px;
            background: darkgreen;
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 80px;
            position: fixed;
            right:20px;
            bottom:30px;
            text-decoration:none;
            display: block;
        }
        #btn2{
            left:30px;
            bottom:30px;
            background: red;
        }
    </style>
</head>
<body>
<a href="javascript:;" id="btn">toTop</a>
<script src="js/jquery.js"></script>
<script src="js/ToTop.js"></script>
<script>
    var toTop=new QuicklyStop({
        ele:$('#btn'),
        duration:700
    });
</script>
</body>
</html>