Next.js中使用Link组件跳转至指定div元素的问题

问题分析 #

你设置了scroll={false}禁用了Next.js默认的滚动行为，但浏览器自带的锚点滚动在客户端路由切换后没有触发，导致页面回到顶部而非定位到ID为Blogs的元素。这是因为路由切换完成后，目标元素可能还未完全渲染，或者默认锚点逻辑被客户端路由机制干扰。

解决方案 #

方案1：手动监听路由变化触发滚动（Pages Router） #

在根路径/的页面组件中，通过useRouter监听路由完成事件，手动定位到目标元素：

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  useEffect(() => {
    const scrollToAnchor = () => {
      const hash = router.asPath.split('#')[1];
      if (hash === 'Blogs') {
        const targetElement = document.getElementById('Blogs');
        targetElement?.scrollIntoView({ behavior: 'smooth' });
      }
    };

    // 页面初始加载时检查锚点
    scrollToAnchor();
    // 路由切换完成后触发滚动
    router.events.on('routeChangeComplete', scrollToAnchor);

    // 组件卸载时移除监听
    return () => router.events.off('routeChangeComplete', scrollToAnchor);
  }, [router]);

  return (
    <div>
      {/* 页面其他内容 */}
      <div id="Blogs">你的博客列表容器</div>
    </div>
  );
}

你的Link组件保持现有配置即可：

<Link
  href={displayAll ? "/#Blogs" : "/Blog"}
  scroll={false}
>
  {displayAll ? "Back Home" : "Read more"}
</Link>

方案2：App Router 适配（Next.js 13+） #

如果使用App Router，需在客户端组件中处理：

1. Blog页面的Link组件：

'use client';
import Link from 'next/link';

export default function Blog() {
  return (
    <div>
      <Link href="/#Blogs" scroll={false}>
        Back Home
      </Link>
    </div>
  );
}

2. 根页面（app/page.js）：

'use client';
import { useEffect } from 'react';

export default function Home() {
  useEffect(() => {
    const hash = window.location.hash;
    if (hash === '#Blogs') {
      const target = document.getElementById('Blogs');
      target?.scrollIntoView({ behavior: 'smooth' });
    }
  }, []);

  return (
    <div>
      <div id="Blogs">博客区域</div>
    </div>
  );
}

额外检查 #

• 确认目标元素的ID完全匹配Blogs，没有拼写错误或大小写问题
• 确保目标元素在根页面中确实存在，且未被CSS隐藏或脱离文档流

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