js,html 监听页面滚动高度 点击返回顶部
程序员文章站
2022-06-12 19:59:24
...
自己上代码比较容易:这边是es6的写法,可以封装成一个组件,这样每个界面都可以用了
/**
* Created by wuyakun on 2017/4/28.
*/
import React from 'react';
//点击返回顶部
class BackTop extends React.Component {
// 渲染之后
componentDidMount() {
window.onscroll = function () {
// 变量t就是滚动条滚动时,到顶部的距离
const t = document.documentElement.scrollTop || document.body.scrollTop;
const top_view = document.getElementById('top_view');
if (top_view !== null) {
top_view.style.display = t >= 100 ? 'block' : 'none';
}
};
}
// 返回顶部
scrollToTop = () => {
window.scrollTo(0, 0);
};
render() {
return (
<div
id="top_view"
onClick={this.scrollToTop}
className="back-top"
>
<span>顶部</span>
</div>
);
}
}
export default BackTop;
上一篇: 微信支付支付结果通知处理
下一篇: 微信支付H5统一下单