Next.js 13 & TypeScript: 自行实现返回顶部按钮

使用 Next.js 13 和 TypeScript 添加一个返回网页顶部的按钮

本文将介绍如何使用 Next.js 13 和 TypeScript 自行实现一个返回顶部按钮的功能，无需依赖任何第三方库。

1. 创建 TopButton 组件

首先，在项目中创建一个新的组件 TopButton.tsx，用于渲染返回顶部按钮：

import { useState } from 'react';

const TopButton = () => {
  const [showButton, setShowButton] = useState(false);

  const handleClick = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <button
      className={`top-button ${showButton ? 'show' : ''}`}
      onClick={handleClick}
    >
      返回顶部
    </button>
  );
};

export default TopButton;

2. 控制按钮显示

在 TopButton 组件中，使用 useState 钩子来控制返回顶部按钮的显隐状态。当页面滚动到一定位置时，显示返回顶部按钮；否则隐藏返回顶部按钮。

import { useState, useEffect } from 'react';

const TopButton = () => {
  const [showButton, setShowButton] = useState(false);

  const handleClick = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  useEffect(() => {
    const handleScroll = () => {
      if (window.pageYOffset > 300) {
        setShowButton(true);
      } else {
        setShowButton(false);
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <button
      className={`top-button ${showButton ? 'show' : ''}`}
      onClick={handleClick}
    >
      返回顶部
    </button>
  );
};

export default TopButton;

3. 在页面中使用 TopButton 组件

在页面中引入 TopButton 组件，并在需要返回顶部的位置添加该组件。

import TopButton from '../components/TopButton';

const Home = () => {
  return (
    <div>
      <h1>欢迎来到首页</h1>
      <p>这是一个 Next.js 13 和 TypeScript 的示例项目。</p>
      <p>请往下滚动页面，查看返回顶部按钮的效果。</p>
      <div style={{ height: '2000px' }}></div>
      <TopButton />
    </div>
  );
};

export default Home;

4. 添加 CSS 样式

在 CSS 中添加样式，用于控制返回顶部按钮的显隐状态和位置。

.top-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: none;
  width: 100px;
  height: 40px;
  background-color: #333;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.top-button.show {
  display: block;
  opacity: 1;
}

5. 运行项目

运行项目，查看返回顶部按钮的效果。