Next.js中点击锚点链接让目标元素居中显示的实现方法

问题分析 #

固定导航栏占据屏幕顶部空间，默认锚点定位会将目标元素对齐到视口顶部，导致内容被遮挡；直接使用scrollIntoView未生效，大概率是因为Next.js默认滚动行为覆盖了自定义逻辑。

方案1：自定义点击事件+手动计算滚动位置 #

灵活适配动态高度的导航栏和目标元素：

1. 修改Footer中的Link组件，禁用默认滚动并添加自定义逻辑：

'use client';
import Link from 'next/link';
import { useRouter } from 'next/navigation';

const Footer = () => {
  const router = useRouter();
  // 替换为你的导航栏实际高度
  const NAV_BAR_HEIGHT = 80;

  const handleAnchorClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    const targetId = 'target';
    // 更新路由hash
    router.push(`/page#${targetId}`);
    
    // 等待路由更新后执行滚动
    setTimeout(() => {
      const targetEl = document.getElementById(targetId);
      if (!targetEl) return;

      // 计算滚动到屏幕中间的位置：视口高度一半 - 元素高度一半 - 导航栏高度
      const centerOffset = window.innerHeight / 2 - targetEl.offsetHeight / 2 - NAV_BAR_HEIGHT;
      // 计算最终滚动的top值
      const scrollTop = targetEl.offsetTop - centerOffset;

      window.scrollTo({
        top: scrollTop,
        behavior: 'smooth'
      });
    }, 0);
  };

  return (
    <Link href="/page#target" onClick={handleAnchorClick}>
      跳转到目标区域
    </Link>
  );
};

export default Footer;

2. 给目标元素添加scroll-margin（可选），防止默认滚动时被导航栏遮挡：

<div id="target" className="scroll-mt-[80px]">
  {/* 目标内容 */}
</div>

方案2：监听路由变化实现全局滚动控制 #

在根布局中统一处理锚点滚动逻辑：

1. 修改layout.tsx，添加路由监听：

'use client';
import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import { inter } from '@/app/fonts';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const NAV_BAR_HEIGHT = 80;

  useEffect(() => {
    const hash = window.location.hash.slice(1);
    if (!hash) return;

    const targetEl = document.getElementById(hash);
    if (!targetEl) return;

    // 计算居中滚动位置
    const targetRect = targetEl.getBoundingClientRect();
    const centerY = window.innerHeight / 2;
    const scrollToY = window.scrollY + targetRect.top - centerY + targetEl.offsetHeight / 2 - NAV_BAR_HEIGHT;

    window.scrollTo({
      top: scrollToY,
      behavior: 'smooth'
    });
  }, [pathname, searchParams]);

  return (
    <html lang="en">
      <body className={`${inter.className} bg-[#FFFFFF]`}>
        <NavBar />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  );
}

2. 禁用Next.js默认锚点滚动：

• 方法一：在next.config.js中添加配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    scrollRestoration: false,
  },
};

module.exports = nextConfig;

• 方法二：给Link组件添加scroll={false}属性：

<Link href="/page#target" scroll={false}>跳转到目标区域</Link>

方案3：纯CSS方案（适合固定高度场景） #

若导航栏和目标元素高度固定，可直接用CSS实现：

1. 全局设置scroll-padding，避开导航栏：

/* 在globals.css中添加 */
html {
  scroll-padding-top: 80px; /* 导航栏高度 */
  scroll-behavior: smooth;
}

2. 给目标元素设置scroll-margin，让它滚动到屏幕中间：

/* 假设目标元素高度为100px，导航栏高度80px */
<div id="target" className="scroll-mt-[calc(50vh-50px-80px)]">
  {/* 目标内容 */}
</div>

内容的提问来源于stack exchange，提问作者MS-18E Kampfer