在React.js项目中使用jQuery实现Navbar点击滚动到对应区块的方法

• 第一步：给各区块组件添加唯一id标识
  给About、Skills等每个页面区块组件的根元素设置唯一id，方便jQuery定位元素，示例如下：

  // About组件示例
  function About() {
    return (
      <section id="about" className="min-h-screen">
        {/* 组件原有内容 */}
      </section>
    )
  }
  

  同理分别给Skills组件加id="skills"、Experience组件加id="experience"、Project组件加id="project"、Contact组件加id="contact"即可，id名称可自定义，只要后续和导航点击逻辑对应即可。
• 第二步：引入jQuery到项目中
  有两种常用引入方式，二选一即可：
  • npm安装：在项目终端执行npm install jquery，之后在Navbar组件顶部引入jQuery：import $ from 'jquery'
  • CDN引入：在public/index.html的<head>标签内添加jQuery的CDN引用，无需额外在组件内import。
• 第三步：在Navbar组件中绑定点击滚动逻辑
  给每个导航项绑定点击事件，调用jQuery的滚动动画方法实现平滑滚动，Navbar组件示例代码如下：

  import $ from 'jquery'
  
  function Navbar() {
    // 封装滚动到指定区块的方法
    const scrollToSection = (sectionId) => {
      $('html, body').animate(
        {
          // 80为固定导航栏的高度，可根据自己的导航实际高度调整，避免滚动后内容被导航遮挡
          scrollTop: $(sectionId).offset().top - 80
        },
        600 // 滚动动画时长，单位为毫秒，可自定义调整
      )
    }
  
    return (
      <nav className="fixed top-0 w-full h-20 bg-black">
        {/* 导航项示例 */}
        <ul className="flex gap-6">
          <li onClick={() => scrollToSection('#about')}>关于</li>
          <li onClick={() => scrollToSection('#skills')}>技能</li>
          <li onClick={() => scrollToSection('#experience')}>经历</li>
          <li onClick={() => scrollToSection('#project')}>项目</li>
          <li onClick={() => scrollToSection('#contact')}>联系</li>
        </ul>
      </nav>
    )
  }
  

注意：如果项目开启了严格ESLint校验，可能会出现$ is not defined的报错，使用npm安装引入的方式可直接规避该问题。另外如果没有强制使用jQuery的要求，更推荐用原生JS的scrollIntoView方法实现同等效果，无需引入额外依赖。

内容的提问来源于stack exchange，提问作者Raman