components/index.js
import './backtop.css';
import 'icons/iconfont.css';
//添加移除的名字
const CHANGED_CLASS_NAME = 'backtop-hidden';
// console.log(headerEl);
//初始状态
const INIT_STATE = 'init';
//改变状态
const CHANGED_STATE = 'changed';


class Backtop {
    constructor(el, critical_point, scrollContainer, eventEl = scrollContainer) {
      this.el = el;
      this.critical_point = critical_point;
  
      // 滚动条所在的容器
      this.scrollContainer = scrollContainer;
  
      // 监听滚动事件的元素
      this.eventEl = eventEl;
  
      this.setState(INIT_STATE);
  
      this.bindEvent();
    }
  
    // 设置状态
    setState(state) {
      this.state = state;
    }
  
    // 绑定事件
    bindEvent() {
      this.eventEl.addEventListener(
        'scroll',
        () => {
          if (this.needChange()) {
            this.setState(CHANGED_STATE);
            this.change();
          } else if (this.needReset()) {
            this.setState(INIT_STATE);
            this.reset();
          }
        },
        false
      );
      this.el.addEventListener('click',()=>{
        this.scrollTo();
      },false);
    }
    //滚动到指定位置
    scrollTo(top=0,left=0){
      this.scrollContainer.scrollTO({
        top,
        left,
        //滚动行为  光滑行为
        behavior:'smooth'
      });
    }

    reset() {
      this.el.classList.add(CHANGED_CLASS_NAME);
    }
  
    needReset() {
      return (
        this.state !== INIT_STATE &&
        this.scrollContainer.scrollTop <= this.critical_point
      );
    }
  
    //   变化
    change() {
      this.el.classList.remove(CHANGED_CLASS_NAME);
    }
  
    //   需要变化
    needChange() {
      return (
        this.state !== CHANGED_STATE &&
        this.scrollContainer.scrollTop > this.critical_point
      );
    }
  }
  
  export default Backtop;

index/components/index.js
import Backtop from 'components/backtop';
const scrollContainer=document.getElementById('index-page');
const backtopEl=scrollContainer.querySelector('backtop');
new Backtop(scrollContainer,window.innerHeight,backtopEl);

index/index.js
//公共
// reset 全部页面的公用样式
import 'styles/reset.css';
// 当前页的公用样式
import 'styles/base.css';
// 公共布局
import 'styles/layout.css';
// 自己的
import './index.css';

//组件
import './components/header';
import './components/slider';
import 'components/loading';
import './components/nav';
import './components/product';
import 'components/tabber';
import './components/backtop';

​