React Bootstrap导航栏移动端无法滚动到指定ID div问题求助

问题根源 #

移动端采用的Offcanvas菜单点击链接后不会自动关闭，不仅遮挡视线，其弹窗状态还会干扰浏览器的锚点滚动逻辑；另外你代码里的Offcanvas ID存在拼写错误（多了一个闭合括号），虽不影响基础显示，但可能导致事件绑定异常。

解决方案步骤 #

1. 修正Offcanvas ID错误
   将id={offcanvasNavbar-expand-md}}修改为id={offcanvasNavbar-expand-md}，移除多余的}。

2. 手动控制Offcanvas显示状态
   通过useState管理Offcanvas的开关状态，点击导航链接时先关闭菜单，再执行锚点滚动操作。

3. 实现锚点滚动逻辑
   提供两种可选实现方式：

• 原生window.scrollTo配合DOM元素查询
• 结合react-router-hash-link的HashLink组件，确保路由锚点跳转正常

修改后的完整代码示例 #

import { useState } from 'react';
import { Navbar, Container, Offcanvas, Nav, Button } from 'react-bootstrap';
// 若使用react-router-hash-link，需导入HashLink
// import { HashLink } from 'react-router-hash-link';

function NavigationBar() {
  // 控制Offcanvas显示状态
  const [showOffcanvas, setShowOffcanvas] = useState(false);

  // 导航点击处理：关闭菜单 + 滚动到目标锚点
  const handleNavClick = (targetId) => {
    setShowOffcanvas(false);
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <Navbar collapseOnSelect expand="lg" variant="light" bg="light">
      <Container fluid className="m-2">
        <Navbar.Brand href="/">
          <Logo />
        </Navbar.Brand>
        {/* 绑定Toggle点击事件控制Offcanvas */}
        <Navbar.Toggle 
          aria-controls={`offcanvasNavbar-expand-md`}
          onClick={() => setShowOffcanvas(!showOffcanvas)}
        />
        <Navbar.Offcanvas
          id={`offcanvasNavbar-expand-md`}
          aria-labelledby={`offcanvasNavbarLabel-expand-md`}
          placement="end"
          show={showOffcanvas}
          onHide={() => setShowOffcanvas(false)}
        >
          <Offcanvas.Header closeButton>
            <Offcanvas.Title id={`offcanvasNavbarLabel-expand-md`}></Offcanvas.Title>
          </Offcanvas.Header>
          <Offcanvas.Body>
            <Nav className="justify-content-end align-items-center flex-grow-1 text-center">
              {/* 替换href为自定义点击事件 */}
              <Nav.Link onClick={() => handleNavClick('about')}>
                <span>01.</span>About
              </Nav.Link>
              <Nav.Link onClick={() => handleNavClick('work')}>
                <span>02.</span>Work
              </Nav.Link>
              <Nav.Link className="nav-last" onClick={() => handleNavClick('contact')}>
                <span>03.</span>Contact
              </Nav.Link>
              <div style={{ width: "100px" }}>
                <Button style={{ padding: "0.65rem 1rem" }}>Resume</Button>
              </div>
            </Nav>
          </Offcanvas.Body>
        </Navbar.Offcanvas>
      </Container>
    </Navbar>
  );
}

export default NavigationBar;

补充说明 #

若坚持使用react-router-hash-link，可将Nav.Link替换为HashLink，同时在点击时关闭Offcanvas：

<HashLink 
  to="#about" 
  onClick={() => setShowOffcanvas(false)}
  className="nav-link" // 添加Bootstrap样式类保持视觉一致
>
  <span>01.</span>About
</HashLink>

这种方式既保留路由锚点跳转逻辑，又能确保移动端点击后关闭菜单并正常滚动。

内容的提问来源于stack exchange，提问作者Rohan Rana Magar