react+TS实现返回顶部

第一种 

js代码 

import { Component, createRef } from "react";
import './scrolltop.css'
interface Props {

}
interface State {

}
export default class ScrollTop extends Component<Props, State>{
    ball = createRef<HTMLDivElement>();
    time: number = 1000 //总时间
    iTarget: number = 0 //目标点位置
    timer: NodeJS.Timeout | null = null;
    start: number = 0;
    dis: number = 0;
    n: number = 0;
    a: number = 0;
    cur: number = 0;
    count: number = 0;
    FnMain() {
        if (this.timer) {
            clearInterval(this.timer)
        }
        this.n = 0;
        this.count = Math.floor(this.time / 30) //总数
        this.start = document.documentElement.offsetTop; //初始位置
        this.dis = this.iTarget - this.start; //总距离



        this.timer = setInterval(this.FnsetInterval.bind(this),30)

    }
    FnsetInterval() {
        this.n++
        this.a = this.