在掛載更新里面判斷滾動條的距離(滾動條不能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); }

　　

轉載于:https://www.cnblogs.com/gfweb/p/9775406.html

總結

以上是生活随笔為你收集整理的react组件回顶部的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。