使用 React Hooks实现一个返回顶部的按钮

【回到顶部】是许多网页非常常用的按钮，通常放在长页面的右下角，点击可以直接让页面回到顶端。

要实现这个组件，需要以下几个要点：

设置定位

按钮定位设置为position: fixed，并且设置位置到屏幕右下角

.top-jumper {
  position: fixed;
  right: 11%;
  bottom: 15%;
  width: 42px;
  height: 42px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
}
.top-jumper:before {
  content: '▲';
  display: block;
  text-align: center;
  color: #aaa;
  line-height: 42px;
}
.top-jumper:hover:before {
  content: '回顶部';
}

基本组件结构

import '@/App.css';
const BackToTop = () => {
  return (
    <div className="top-jumper" onClick={() => window.scrollTo(0, 0)}>
      <span className="text"></span>
    </div>
  );
};

export default BackToTop;

控制显隐

当然，一般来说如果页面在顶部，按钮是不显示的，我们需要监听滚动事件，等到页面下拉到一定高度再显示，现在我们结合state hooks和effect hooks控制按钮的显隐

import React, { useEffect, useState } from 'react';
import '@/App.css';

function TopJumper() {
  // 显隐状态
  const [show, switchShow] = useState(false);

  useEffect(() => {
    const listener = () => {
      switchShow(window.scrollY > 300);
    };
    document.addEventListener('scroll', listener);
    // 组件销毁后，取消监听
    return () => document.removeEventListener('scroll', listener);
  }, [show]);

  return show ? (
    <div className="top-jumper" onClick={() => window.scrollTo(0, 0)}>
      <span className="text"> </span>
    </div>
  ) : null;
}

export default TopJumper;

实现节流

你以为这就完了？非也。但如果你是“又不是不能用”星人，那么下面的内容对你来说已经没用了！
作为一个资深切图仔，应该察觉到上面那段代码是不完美的，原因就在于浏览器滚动事件调用得太频繁了，会造成一定的性能问题。
我们得实现一个节流函数：

const createThrottle = (
  callback: Function,
  delay?: number,
  thisArg?: unknown
): Function =>{
  let lastInvokeTime: number = Date.now();
  const _delay = Number(delay) || 200
  return (...args: any[]): void=>{
    const now = Date.now()
    if (now - _delay <= lastInvokeTime) {
      return;
    }
    lastInvokeTime = now;
    callback.call(thisArg, ...args)
  }
}
export {
  createThrottle
}

改造组件

import React, { useEffect, useState } from 'react';
import { createThrottle } from '@/utils/helpers';
import '@/App.css';
const BackToTop = () => {
  // 图标的显隐状态
  const [show, switchShow] = useState(false);

  useEffect(() => {
    const listener = createThrottle(() => {
      const shouldShow = window.scrollY > 300;
      if (shouldShow !== show) {
        switchShow(shouldShow);
      }
    }, 500) as EventListener; // 事件监听器
    document.addEventListener('scroll', listener);
    // 组件销毁时，取消监听
    return () => document.removeEventListener('scroll', listener);
  }, [show]);

  return show ? (
    <div className="top-jumper" onClick={() => window.scrollTo(0, 0)}>
      <span className="text"></span>
    </div>
  ) : null;
};

export default BackToTop;

彩蛋

css中对html跟元素添加scroll-behavior: smooth;属性，实现网页平滑滚动（不兼容低版本的浏览器）

原文链接：

【React】如何使用 React Hooks实现一个返回顶部的按钮