概述

1. 描述：常见的返回顶部的按钮的实现（市面上也有已实现的成熟的组件，如 Antd，<BackTop/>组件）。

主要实现

ScrollToTop.tsx

import * as React from "react";
import ToTopBtn from "../ToTopBtn";

import style from "./scroll-to-top.styl?css-modules";

class ScrollToTop extends React.Component {
  private toTopBtnRef: React.RefObject<HTMLDivElement>;
  constructor(props) {
    super(props);

    this.toTopBtnRef = React.createRef();
  }
  public componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }
  public componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }
  private handleScroll = () => {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop >= window.innerHeight) {
      this.toTopBtnRef.current.style.display = "block";
    } else {
      this.toTopBtnRef.current.style.display = "none";
    }
  }
  private handleClick() {
    const initialScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 计算每次减少的步长
    const step = Math.round(initialScrollTop / 10);
    const scroll = () => {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      window.scrollTo(0, scrollTop - step);
      if (scrollTop > 0) {
        requestAnimationFrame(scroll);
      }
    }
    requestAnimationFrame(scroll);
  }
  public render() {
    return (
      <div className={style.toTopBtn} ref={this.toTopBtnRef}
        onClick={() => {this.handleClick()}}>
        <ToTopBtn />
      </div>
    );
  }
}

export default ScrollToTop;

scroll-to-top.styl

$baseRem = 20
px2rem($px, $rem = $baseRem)
  ($px / $rem)rem
.to-top-btn
  display: none
  position: fixed
  right: px2rem(12)
  bottom: px2rem(17)
  z-index: 999
  width: px2rem(52)

ToTopBtn.tsx

import * as React from "react";

const ToTopBtn = () => {
  return (
    <svg
      data-name="\u56FE\u5C42 1"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 52 52"
    >
      <title>top btn</title>
      <g data-name="ic top">
        <circle cx="26" cy="26" r="18" fill="#fafbfb" />
        <path
          d="M26.75 23.56v10.69a.75.75
     0 0 1-1.5 0V23.56L19.1 29.7a.75.75 0 0 1-1.1-1.06l7.42-7.42a.75.75
      0 0 1 1 0L34 28.64a.75.75 0 1 1-1.06 1.06zm-8-5.56h14.5a.75.75 0
       0 1 0 1.5h-14.5a.75.75 0 0 1 0-1.5z"
          fill="#757575"
        />
      </g>
    </svg>
  );
};

export default ToTopBtn;