使用react完成点击返回顶部操作

BackTop onClick={this.props.toTop}>返回</BackTop>

toTop(){
        console.log(111)
        window.scrollTo(0,0)
    }

showTop:false

const mapStateToProps = (state) =>{
        return {
            showTop:state.components.get('showTop')
        }
    }
//通过三元控制显示隐藏
{
   this.props.showTop ? <BackTop onClick={this.props.toTop}>返回</BackTop> : null
 }

//在componentDidMount中监听事件
    componentDidMount() {
        this.bindEvents();
    }
//然后监听
bindEvents() {
    window.addEventListener("scroll", this.props.changeScrollTop)
}
//在mapDispatch中将数据传递给store，并且判断滚动到什么地方派发
const mapDispatchToProps = (dispatch) =>{
        return{
            changeScrollTop() {
               if(document.documentElement.scrollTop > 400){
                   dispatch(actionCreators.changeScrollShow(true))
               }else {
                   dispatch(actionCreators.changeScrollShow(false))
               }
            }
        }
    }

export const changeScrollShow = (show) => ({
    type:actionTypes.CHANGE_SCROLL_SHOW,
    show
})

if(action.type === actionTypes.CHANGE_SCROLL_SHOW){
    return state.set('showTop',action.show)
}

const [show, onShow] = useState(false)
// 返回顶部
const backTop = () => {
    const s = document.documentElement.scrollTop || document.body.scrollTop
    if (s > 0) {
      // 要求浏览器在下次重绘之前调用 backTop 回调函数更新动画
      window.requestAnimationFrame(backTop)
      window.scrollTo(0, s - s / 8)
    }
}
// 是否显示返回顶部
useEffect(() => {
    const handleScroll = () => {
        if (window.scrollY > window.innerHeight) {
            onShow(true)
        } else {
            onShow(false)
        }
    }
    document.addEventListener('scroll', handleScroll)
    return () => document.removeEventListener('scroll', handleScroll)
}, [show])
 
// html
{show && (
    <div className="arrow-up" onClick={backTop}>
      <img src={require('@/assets/images/arrow.png')} />
    </div>
)}