react+ts封装返回顶部组件

Posted 2022-01-05 老张在线敲代码

组件代码

import React,  Component  from 'react';

class index extends Component 
    constructor(props:any)
        super(props)
        this.state=
            show:false
        
        this.onScroll = this.onScroll.bind(this)
    
    onScroll = () => 
        const show:any=this.state
        if (document.documentElement.scrollTop > 100) 
          this.setState( show: true )
         else
          this.setState( show: false )
        
      
    scrollToTop = () => 
        let scrollToptimer = setInterval(function() 
            var top = document.body.scrollTop || document.documentElement.scrollTop;
            var speed = top / 16;
            document.documentElement.scrollTop -= speed;
            if (top == 0) 
              clearInterval(scrollToptimer);
            
          , 5);
    
    componentDidMount()
      window.onscroll = this.onScroll;
    
    render() 
        const show:any=this.state
        return (
            <div>

                
                    show&&<div onClick=()=>this.scrollToTop() className='fanhui'><img src=require("../../zyb_imgs/back_top_Z.png").default alt="" /></div>
                
                
            </div>
        );
    


export default index;

组件样式

.fanhui
    position: fixed;
    bottom: 60px;
    right: 40px;
    width: 60px;
    height: 60px;
   img
       display: block;
       width: 100%;