react組件回頂部

標籤：ack   javascrip   變數   list   返回頂部   const   col   一個   asc   

在掛載更新裡面判斷捲軸的距離(捲軸不能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);   }

　　

react組件回頂部