返回顶部效果JS实现

JS

window.scrollTo(0, 0)

监听页面滚动事件

第二个参数是回调函数的名称

window.removeEventListener('scroll', this.props.changeScrollTopShow)

滚动条到顶部的距离

document.documentElement.scrollTop

React实现返回顶部

<BackTop onClick={this.backToTop}>顶部</BackTop>

（1）不带动画

backToTop() {
        window.scrollTo(0, 0)
    }

（2）带动画
调动画快慢就调定时器的第二个参数，这里表示每0.001秒执行一次

backToTop() {
    const scrollToTop = window.setInterval(() => {
        let pos = window.pageYOffset;
        if ( pos > 0 ) {
          window.scrollTo( 0, pos - 20 );
        } else {
          window.clearInterval( scrollToTop );
        }
      }, 1);
}

返回顶部按钮的显示和隐藏

componentDidMount () {
    this.bindEvents();
}

componentWillUnmount () {
   window.removeEventListener('scroll', this.props.changeScrollTopShow)
}

bindEvents() {
    window.addEventListener('scroll', this.props.changeScrollTopShow)
}

const mapDispatch = (dispatch) => ({
    changeScrollTopShow(e) {
        if (document.documentElement.scrollTop > 200) {
            dispatch(actionCreators.toggleTopShow(true))
        } else {
            dispatch(actionCreators.toggleTopShow(false))
        }
    }
});