react组件回顶部

发布时间：2020-12-15 20:22:11 所属栏目：百科来源：网络整理

导读：在挂载更新里面判断滚动条的距离(滚动条不能overflow: auto 踩坑)? componentDidMount(){ window.addEventListener(‘scroll‘,()={ let scrollTop = document.documentElement.scrollTop || document.body/scrollTop; if(scrollTop 500){ this.setState({ s

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!