返回顶部效果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))
}
}
});
上一篇: 变量交换的四种方式
下一篇: java的四种引用方式