react组件回顶部

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);

 }