react组件回顶部

在挂载更新里面判断滚动条的距离(滚动条不能overflow: auto 踩坑)

 componentDidMount(){
    window.addEventListener('scroll' , ()=>{
      let scrollTop = document.documentElement.scrollTop || document.body/scrollTop;
      if(scrollTop > 500){
        this.setState({
          show : true
        })
      }else{
        this.setState({
          show : false
        })
      }
    })
  }

　　在this.state= ({})定义一个显示的变量

 constructor(props){
    super(props)
    this.state = ({
      show : false
    })
  }

　　在jsx语法里面

render() {
    let { show } = this.state;
    return (

      <div className="common-back">
        {
          show &&
          <div onClick={this.goTo} className="iconfont icon-huidaodingbu1"></div>
        }

      </div>
    );
  }

　　然后点击返回顶部,有动画效果的 , 没有动画用 window.scrollTo(0,0);

 goTo(){
    let scrollToTop = window.setInterval(function() {
      let pos = window.pageYOffset;
      if ( pos > 0 ) {
          window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
      } else {
          window.clearInterval( scrollToTop );
      }
  }, 2);
  }