NextJS 13锚点链接点击不滚动，手动输入URL却正常问题求助

你当前的问题是导航点击后URL更新、样式变化，但页面不滚动到目标区域，核心原因是Link组件中设置了scroll={false}，这个属性直接禁用了Next.js默认的锚点滚动行为。

下面提供两种修复方案：

方案一：使用Next.js默认滚动行为 #

直接移除所有Link组件的scroll={false}属性，让Next.js自动处理锚点滚动，同时保留你的激活样式逻辑：

修改后的Navbar组件关键代码片段：

"use client";
import React from "react";
import Link from "next/link";
import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai";

const Navbar = () => {
  const [isVisible, setIsVisible] = React.useState(false);
  const [currActive, setCurrActive] = React.useState("r");

  const handleCurrentActive = (current) => {
    setCurrActive(current);
  };

  const handleVisibility = () => {
    setIsVisible((prev) => !prev);
  };

  const NavIcon = isVisible ? AiOutlineClose : AiOutlineMenu;

  return (
    <>
      <NavIcon
        onClick={handleVisibility}
        className={`${isVisible ? "text-wht" : "text-blk"} scale-105 z-10 fixed top-5 right-5`}
      />
      {isVisible && (
        <div
          className="fixed top-3.5 left-2/4 -translate-x-2/4 
                      cstm-flex-col flex-wrap p-3 gap-5 
                      font-ibm font-light text-sm text-gr1
                      bg-blk w-11/12 rounded-md shadow-xl"
        >
          <Link
            href="#r"
            onClick={() => handleCurrentActive("r")}
            className={`${currActive === "r" && "text-pnk3"}`}
          >
            holder
          </Link>
          <Link
            href="#a_m"
            onClick={() => handleCurrentActive("a_m")}
            className={`${currActive === "a_m" && "text-pnk3"}`}
          >
            holder
          </Link>
          <Link
            href="#t_s"
            onClick={() => handleCurrentActive("t_s")}
            className={`${currActive === "t_s" && "text-pnk3"}`}
          >
            holder
          </Link>
          <Link
            href="#m_p"
            onClick={() => handleCurrentActive("m_p")}
            className={`${currActive === "m_p" && "text-pnk3"}`}
          >
            holder
          </Link>
          <Link
            href="#h_m"
            onClick={() => handleCurrentActive("h_m")}
            className={`${currActive === "h_m" && "text-pnk3"}`}
          >
            holder
          </Link>
        </div>
      )}
    </>
  );
};

export default Navbar;

方案二：手动实现自定义滚动（如平滑滚动） #

如果需要自定义滚动效果（比如平滑滚动），可以保留scroll={false}，但在点击事件中手动添加滚动逻辑：

"use client";
import React from "react";
import Link from "next/link";
import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai";

const Navbar = () => {
  const [isVisible, setIsVisible] = React.useState(false);
  const [currActive, setCurrActive] = React.useState("r");

  const handleScrollToSection = (id) => {
    setCurrActive(id);
    // 定位目标元素并执行平滑滚动
    const targetElement = document.getElementById(id);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
    }
    // 点击后关闭导航菜单（可选）
    setIsVisible(false);
  };

  const handleVisibility = () => {
    setIsVisible((prev) => !prev);
  };

  const NavIcon = isVisible ? AiOutlineClose : AiOutlineMenu;

  return (
    <>
      <NavIcon
        onClick={handleVisibility}
        className={`${isVisible ? "text-wht" : "text-blk"} scale-105 z-10 fixed top-5 right-5`}
      />
      {isVisible && (
        <div
          className="fixed top-3.5 left-2/4 -translate-x-2/4 
                      cstm-flex-col flex-wrap p-3 gap-5 
                      font-ibm font-light text-sm text-gr1
                      bg-blk w-11/12 rounded-md shadow-xl"
        >
          <Link
            href="#r"
            scroll={false}
            onClick={() => handleScrollToSection("r")}
            className={`${currActive === "r" && "text-pnk3"}`}
          >
            holder
          </Link>
          <Link
            href="#a_m"
            scroll={false}
            onClick={() => handleScrollToSection("a_m")}
            className={`${currActive === "a_m" && "text-pnk3"}`}
          >
            holder
          </Link>
          <Link
            href="#t_s"
            scroll={false}
            onClick={() => handleScrollToSection("t_s")}
            className={`${currActive === "t_s" && "text-pnk3"}`}
          >
            holder
          </Link>
          <Link
            href="#m_p"
            scroll={false}
            onClick={() => handleScrollToSection("m_p")}
            className={`${currActive === "m_p" && "text-pnk3"}`}
          >
            holder
          </Link>
          <Link
            href="#h_m"
            scroll={false}
            onClick={() => handleScrollToSection("h_m")}
            className={`${currActive === "h_m" && "text-pnk3"}`}
          >
            holder
          </Link>
        </div>
      )}
    </>
  );
};

export default Navbar;

额外注意事项 #

• 确保目标元素的id与Link的href锚点完全匹配（如你的<div id="r">对应#r，当前代码已符合要求）
• 如果使用方案二，可根据需求调整scrollIntoView的参数（如block: "center"让元素滚动到视口中央）

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