react组件回顶部

Posted 2021-01-12 gfweb

在挂载更新里面判断滚动条的距离(滚动条不能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); 
  }