js,html 监听页面滚动高度 点击返回顶部

来源:互联网 发布:广东亿赞普大数据 编辑:程序博客网 时间:2024/06/04 17:56

自己上代码比较容易:这边是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;
0 0
原创粉丝点击