回到顶部+面向对象+ES6+jQuery

scrollTop()的值是通过window来获取：$(window).scrollTop()；回调中的this指向一定要准确；这是一个组件，用户主要调用ToTop.js文件，创建一个实例对象就可以实现一个回到顶部按钮的功能

ToTop构造函数

class ToTop{
   constrouctor(opt){ // 构造函数里面存放的是实例的私有属性和方法  获取我们需要操作的对象
       this.btn=opt.ele;

      // duration 是可以设置的：回到顶部的时间
   this.duration=opt.duration || 1000;  // 默认1000

    this.timer=null;
    this.step=null;
 // 有名字的箭头函数
   this.name=null;
        this.init(); // 调用init函数，后面的代码才会执行   
   }   
// 初始化函数
   init(){
   // 滚轮事件
   this.scrollEvent();


       // 点击按钮，回到顶部
       this.clickEvent();
   }
    clickEvent(){
        this.btn.click(()=>{
// 按钮点击的时候，立即隐藏按钮
          // this.btn.hide(); 这样写的话，会出现按钮一闪的现象，因为当我们点击按钮的时候会触发滚轮，然后使得按钮在隐藏的时候又显示  我们应该使用事件解除的方法来是按钮隐藏
        this.btn.hide();
// 解除事件绑定  解除什么行为，给 那个函数解除
 $(window).off('scroll',this.name);
 


            // 计算步长  target/duration*interval
             var target=$(window).scrollTop(); // 获取scrollTop的值，滚动条滚动的距离
              var duration=this.duration;// 这个this要指向实例的this，故前面的函数使用箭头函数
              var interval=30;
              var step=target/duation*interval;
//   this.timer=setInterval(this.toTop,interval); // 因为等到时间到的时候，就会调用this.toTop()函数执行，此时的this是指向window的，不是我们需要的实例，所以此要使用箭头函数
 
        this.timer=setInterval(()=>{
                   this.toTop();
             },interval)
       })
   }
       toTop(){
   
                  // 每次求出最新的距离顶部
                var curTop=$(window).scrollTop();
                  // 在最新的距离上面减去step
                  curTop-=this.step;
                  //  停止运动的条件
                        if(curTop<=0){
                                     $(window).scrollTop(0);
                                 clearInterval(this.timer);
                       $(window).on('scroll',this.name=()=>{
                  this.showOrHide();
                })
                                return;
                         }
                  // 设置最新的距离
                     $(window).scrollTop(curTop);
                 
            
                 }


  scrollEvent(){
              // 触发滚轮事件 window是一个对象 这种写法还是不能解除事件，因为off是不能解除匿名的事件的
          // $(window).scroll(()=>{
               //     this.showOrHide();
              //  })

     // 使用on是为了绑定事件，然后可以解除事件 有名字的箭头函数
         $(window).on('scroll',this.name=()=>{
                       this.showOrHide();
                })
   }

showOrHide(){
            // 滚动条卷去的记录大于一屏幕出现回到顶部按钮
                   if($(window).scrollTop()>$(window).height){
                        this.btn.show();
                     } else{
                            this.btn.hide();
                       }       
      }
}

创建实例

// 引入所需的jQuery文件和ToTop.js文件
// 创建实例 new 构造函数
  var toTop=new ToTop({
            ele:$('#btn'),
            duration:1000  
   });
// 这样就创建了两个回到顶部的按钮
var toTop2=new ToTop({
     ele:$('#btn2') 
  })