React个人作品集网站导航栏点击滚动至指定区块实现方法咨询

你的问题出在react-router-dom的Link组件默认是用于路由跳转，而非页面内锚点滚动，直接用它带#的方式不会触发预期的页面内滚动。下面是两种实用的解决方法：

方法一：原生JavaScript实现自定义滚动（推荐，无额外依赖） #

直接通过点击事件调用原生的scrollIntoView方法，实现平滑滚动到指定区块，同时处理汉堡菜单的关闭逻辑：

import React, { useState, useEffect } from 'react'
import "./Navbar.css"
import { FaBars, FaTimes } from 'react-icons/fa'

const Navbar = () => {
  const [click, setClick] = useState(false)
  const handleClick = () => setClick(!click)
  const [color, setColor] = useState(false)

  // 优化滚动监听逻辑，避免重复绑定事件
  const changeColor = () => {
    setColor(window.scrollY >= 100);
  };

  useEffect(() => {
    window.addEventListener('scroll', changeColor);
    return () => window.removeEventListener('scroll', changeColor);
  }, []);

  // 滚动到指定区块的核心函数
  const scrollToSection = (sectionId) => {
    const targetElement = document.getElementById(sectionId);
    if (targetElement) {
      // 平滑滚动，可配置滚动对齐方式
      targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
    // 点击导航后自动关闭汉堡菜单
    setClick(false);
  };

  return (
    <div className={color ? "header header-bg":"header"}>
      {/* 点击logo回到顶部 */}
      <div onClick={() => scrollToSection('header')} style={{ cursor: 'pointer' }}>
        <h1 className="header6">Portfolio</h1>
      </div>
      <ul className={click?"nav-menu.active":"nav-menu"}>
        <li onClick={() => scrollToSection('header')}>Home</li>
        <li onClick={() => scrollToSection('projects')}>Projects</li>
        <li onClick={() => scrollToSection('qualification')}>Qualification</li>
        <li onClick={() => scrollToSection('experience')}>Experience</li>
        <li onClick={() => scrollToSection('about')}>About</li>
        <li onClick={() => scrollToSection('contact')}>Contact</li>
      </ul>
      <div className='hamburger' onClick={handleClick}>
        {click
          ? (<FaTimes size={20} style={{ color: "whitesmoke" }} />)
          : (<FaBars size={20} style={{ color: "whitesmoke" }} />)
        }
      </div>
    </div>
  )
}

export default Navbar

注意事项： #

• 确保页面中对应区块已设置正确的id，例如：<section id="projects">...</section>
• 如果需要保留<a>标签的默认样式，可以替换为：

  <a href="#projects" onClick={(e) => {
    e.preventDefault();
    scrollToSection('projects');
  }}>Projects</a>
  

方法二：使用HashRouter配合锚点（适合需要保留URL锚点的场景） #

如果需要在URL中保留锚点信息（比如刷新页面后停留在对应区块），可以改用HashRouter并配合CSS平滑滚动：

1. 修改路由配置（在项目入口文件如index.js）：

import { HashRouter } from 'react-router-dom';

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

2. 保留Link组件并修正to属性：

<Link to="#header">Home</Link>
<Link to="#projects">Projects</Link>
<!-- 其他导航项同理 -->

3. 在全局CSS中添加平滑滚动样式：

html {
  scroll-behavior: smooth;
}

这种方法会让URL变为http://your-site/#projects的形式，用户刷新页面时会自动滚动到对应区块。

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