单击导航栏不平滑滚动（已安装 react-scroll）答案

【问题标题】：Clicking on Navbar not Smooth Scrolling (installed react-scroll)单击导航栏不平滑滚动（已安装 react-scroll）
【发布时间】：2021-09-09 08:08:35
【问题描述】：

我对这个 react-scroll 做错了什么？我想单击导航栏链接并平滑滚动到同一页面上的相应部分。但是，单击导航项目不会执行任何操作。有人可以帮我解释为什么这不起作用吗？

我运行了 npm install react-scroll。

App.js

import './App.css';
import React from 'react';

import Navbar from './components/Navbar/Navbar';
import About from './components/About/About';
import Skills from './components/Skills/Skills';

function App() {
  return (
    <React.Fragment>
      <header>
        <Navbar />
      </header>
      <main>
        <About id='about' />
        <Skills id='skills' />
      </main>
    </React.Fragment>
  );
}

export default App;

Navbar.js

import { Link as LinkScroll } from 'react-scroll';

const Navbar = () => {
  return (
    <nav> 
      <LinkScroll
        activeClass='active'
        to='about'
        spy={true}
        smooth={true}
        offset={-70}
        duration={500}
      >
        About
      </LinkScroll>
      <LinkScroll
        activeClass='active'
        to='skills'
        spy={true}
        smooth={true}
        offset={-70}
        duration={500}
      >
        Skills
      </LinkScroll>
    </nav>
  );
};

export default Navbar;

【问题讨论】：

你也可以用css做：w3

标签： javascript css reactjs single-page-application react-scroll

【解决方案1】：

从组件标签中删除id：

<main>
    <About />
    <Skills />
</main>

然后在这些组件的根选项卡中添加这些 id。假设您的组件是：

import React from "react";

export default ({ name }) => (
  <div id="skills" style={{ height: "500px" }}>
    <h1>Hello {name}!</h1>
  </div>
);

【讨论】：