使用 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) || 200return (...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实现一个返回顶部的按钮

使用 React Hooks实现一个返回顶部的按钮相关推荐

axure下移固定地方_axure固定元件位置教程：使用axure动态面板制作一个返回顶部的按钮...
许多网站上都有一个"返回页首"按钮.无论屏幕如何滚动,"返回顶部"按钮始终浮动在固定位置,随时可用.一旦点击它,他就像一个小小的火箭,摇晃起来,页面将返回页面顶 ...
HTML点击元素页面回到顶部,博客园页面添加返回顶部 TOP 按钮
博客园页面添加返回顶部 TOP 按钮 TOP 按钮进入网页管理 -> 设置在 "页面定制 CSS 代码" 中添加如下 CSS 样式, 当然你可以改为自己喜欢的样式此处可 ...
移动端的返回顶部悬浮按钮还需要存在吗？
一. 返回顶部悬浮按钮的出现返回顶部悬浮按钮大家都不陌生,在pc端浏览网页的时候都会在右下角出现,方便用户点击后直接返回到顶部.产品功能都是为了解决用户的需求而出现的,返回顶部悬浮按钮也是如此.那么 ...
如何使用 React 和 React Hooks 创建一个天气应用
大家好,我是若川(点这里加我微信 ruochuan12,长期交流学习).今天推荐一个练手的React项目,创建天气应用,相信很快能看完.昨天发送书掉粉18人,是我没想到的,送书一般是出版社按阅读量赞助 ...
【前端】HTML底部返回顶部悬浮按钮
CSS样式: .back-to {bottom: 55px;overflow: hidden;position: fixed;right: 10px;width: 110px;z-index: 999 ...
jquery 实现返回顶部功能
1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon. 2. 绑定window 的scro ...
react hooks使用_如何开始使用React Hooks：受控表格
react hooks使用 by Kevin Okeh 由Kevin Okeh 如何开始使用React Hooks:受控表格 (How to Get Started With React Hooks: ...
React hooks中swr的原理和源码解析
授权转载自:JonyYu https://github.com/forthealllight/blog/issues/61 swr是一个hook组件,可以作为请求库和状态管理库,本文主要介绍一下在项目 ...
返回顶部的js实现(jQuery/MooTools)
一.引言在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 如果你看到这段文字,说明转自<一棵树-博客园>,原文链接:http://www.cnb ...