欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

返回顶部效果JS实现

程序员文章站 2022-05-15 18:38:12
...

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))
        }
    }
});
相关标签: 样式