Next.js锚点链接问题求助：跨页跳转无法定位至指定元素

问题情况 #

• 同一页面内锚点跳转正常，但从其他页面跳转时，仅加载目标页面，不会自动滚动到指定锚点元素
• 使用Next.js自带的<Link>组件时，桌面端就会出现该问题；替换为普通<a>标签后，部分移动设备仍无法正常触发锚点滚动
• 当前使用的链接代码：

<li>
  <a href={`/${lange}#payCont`} itemProp="url">
    <span itemProp="name">{lib.aboutUs}</span>
  </a>
</li>

解决思路与方法 #

1. 手动监听路由完成事件处理滚动 #

在目标页面中，利用Next.js的router监听路由切换完成事件，主动获取锚点并执行滚动操作：

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

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

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

    // 页面加载时执行一次
    scrollToAnchor();
    // 监听客户端路由切换完成事件
    router.events.on('routeChangeComplete', scrollToAnchor);

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

  // 页面其余内容...
}

2. 禁用<Link>默认滚动行为并手动处理 #

如果想继续使用<Link>组件，可通过scroll={false}关闭其默认滚动逻辑，再结合上面的手动滚动方法：

import Link from 'next/link';

// 导航链接部分
<li>
  <Link href={`/${lange}#payCont`} scroll={false}>
    <a itemProp="url">
      <span itemProp="name">{lib.aboutUs}</span>
    </a>
  </Link>
</li>

3. 检查锚点元素的有效性 #

• 确认目标页面中存在id="payCont"的元素，且ID拼写完全一致
• 确保页面内没有重复的ID，重复ID会导致浏览器无法定位到正确元素

4. 适配移动设备的特殊处理 #

部分移动浏览器对锚点滚动的支持有差异，可尝试以下调整：

• 给锚点元素添加tabIndex="-1"，确保它能被浏览器正确识别为可定位目标：

<div id="payCont" tabIndex="-1">
  <!-- 锚点区域内容 -->
</div>

• 给滚动操作添加少量延迟，确保页面内容完全渲染后再执行：

const scrollToAnchor = () => {
  setTimeout(() => {
    const hash = router.asPath.split('#')[1];
    if (hash) {
      const targetElement = document.getElementById(hash);
      targetElement?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }, 100); // 可根据页面加载速度调整延迟时长
};

5. 处理固定头部遮挡问题 #

如果页面有固定定位的导航栏，锚点元素可能会被头部遮挡，可计算头部高度调整滚动位置：

const scrollToAnchor = () => {
  const hash = router.asPath.split('#')[1];
  if (!hash) return;

  const targetElement = document.getElementById(hash);
  const header = document.querySelector('header');
  if (targetElement && header) {
    const headerHeight = header.offsetHeight;
    targetElement.scrollIntoView({ behavior: 'smooth' });
    // 向上偏移头部高度，避免内容被遮挡
    window.scrollBy(0, -headerHeight);
  }
};

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