在掛載更新里面判斷滾動(dòng)條的距離(滾動(dòng)條不能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= ({})定義一個(gè)顯示的變量

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

　　在jsx語(yǔ)法里面

render() {let { show } = this.state;return (<div className="common-back">{show &&<div onClick={this.goTo} className="iconfont icon-huidaodingbu1"></div>}</div>);}

　　然后點(diǎn)擊返回頂部,有動(dòng)畫效果的 , 沒(méi)有動(dòng)畫用?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); }

　　

轉(zhuǎn)載于:https://www.cnblogs.com/gfweb/p/9775406.html

總結(jié)

以上是生活随笔為你收集整理的react组件回顶部的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。