在React.js中滚动显示图标

npm install react-icons react-scroll

import React from 'react';
import { FaArrowCircleUp } from 'react-icons/fa';
import { Link } from 'react-scroll';

class ScrollIcon extends React.Component {
  render() {
    return (
      <div>
        <Link
          activeClass="active"
          to="top"
          spy={true}
          smooth={true}
          offset={-70}
          duration={500}
        >
          <FaArrowCircleUp className="scroll-icon" />
        </Link>
      </div>
    );
  }
}

import React from 'react';

class ScrollIcon extends React.Component {
  scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }

  render() {
    return (
      <div className="scroll-icon" onClick={this.scrollToTop}>
        <img src="path/to/scroll-icon.png" alt="Scroll to top" />
      </div>
    );
  }
}

export default ScrollIcon;

import React from 'react';
import ScrollIcon from './ScrollIcon';

class App extends React.Component {
  render() {
    return (
      <div>
        {/* 页面内容 */}
        <ScrollIcon />
      </div>
    );
  }
}

export default App;