转到另一个页面，一次单击滚动到特定的div (Reactjs)

npm install react-router-dom react-scroll

import React from 'react';
import { Link } from 'react-router-dom';
import { animateScroll as scroll } from 'react-scroll';

const ScrollToDivPage = () => {
  const scrollToDiv = () => {
    scroll.scrollTo('#targetDiv', {
      smooth: true, // 平滑滚动
      duration: 500, // 滚动持续时间（毫秒）
      offset: -50 // 滚动偏移量（可根据需要进行调整）
    });
  };

  return (
    <div>
      <h1>Scroll To Div Page</h1>
      <button onClick={scrollToDiv}>滚动到特定的div</button>
      <div id="targetDiv" style={{ height: '1000px', background: 'gray' }}>
        目标div
      </div>
      <Link to="/">返回首页</Link>
    </div>
  );
};

export default ScrollToDivPage;

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import ScrollToDivPage from './ScrollToDivPage';

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/scroll">转到另一个页面</Link>
            </li>
          </ul>
        </nav>
        <Route path="/" exact render={() => <h1>首页</h1>} />
        <Route path="/scroll" component={ScrollToDivPage} />
      </div>
    </Router>
  );
};

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));