Next.js中使用Link跳转至同页面区块并设置偏移量的方法

Next.js原生<Link>组件没有offset属性，没法直接像react-scroll那样设置偏移量，这里给你三个实用的解决办法：

方法一：CSS偏移法（最简单） #

给锚点目标元素加顶部内边距，再用负外边距抵消，既不影响页面布局，又能让滚动位置自动避开导航栏：

假设目标区块是#testimonials，添加以下CSS：

#testimonials {
  padding-top: 90px; /* 数值等于导航栏高度 */
  margin-top: -90px; /* 抵消padding，避免区块布局下移 */
}

优点是不用改JS代码，直接用原来的Link就行；缺点是如果导航栏高度是动态的（比如移动端折叠），需要配合媒体查询调整数值。

方法二：JS手动控制滚动（适配动态场景） #

如果导航栏高度会变化，或者需要更精确的控制，手动处理点击事件，自定义滚动逻辑：

Pages Router 版本 #

import Link from 'next/link';

const handleAnchorClick = (e) => {
  e.preventDefault(); // 阻止Link默认跳转行为
  const targetId = 'testimonials';
  const targetElement = document.getElementById(targetId);
  
  if (targetElement) {
    const navbarHeight = 90;
    // 计算目标位置：元素顶部距离视口的高度 + 页面滚动距离 - 导航栏高度
    const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navbarHeight;
    
    // 平滑滚动到目标位置
    window.scrollTo({
      top: targetPosition,
      behavior: 'smooth'
    });
    // 更新URL hash，保持路由同步
    window.history.pushState(null, '', `/#${targetId}`);
  }
};

// 使用Link组件
<Link href='/#testimonials' onClick={handleAnchorClick}>
  Testimonials
</Link>

App Router 版本（Next.js 13+） #

需要标记为客户端组件，并用useRouter更新路由：

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

const handleAnchorClick = (e) => {
  e.preventDefault();
  const targetId = 'testimonials';
  const targetElement = document.getElementById(targetId);
  const router = useRouter();
  
  if (targetElement) {
    const navbarHeight = 90;
    const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navbarHeight;
    
    window.scrollTo({ top: targetPosition, behavior: 'smooth' });
    router.push(`/#${targetId}`); // 更新路由hash
  }
};

方法三：全局配置滚动行为（Next.js 13+ App Router） #

如果所有锚点都需要偏移导航栏，可以在根布局里全局配置滚动恢复逻辑，一劳永逸：

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

export default function RootLayout({ children }) {
  useEffect(() => {
    const adjustScrollPosition = () => {
      const hash = window.location.hash.slice(1);
      if (!hash) return;
      
      const targetElement = document.getElementById(hash);
      if (targetElement) {
        const navbarHeight = 90;
        const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navbarHeight;
        window.scrollTo({ top: targetPosition, behavior: 'smooth' });
      }
    };

    // 页面加载时如果有hash，自动调整位置
    adjustScrollPosition();
    // 监听hash变化，实时调整
    window.addEventListener('hashchange', adjustScrollPosition);
    
    return () => window.removeEventListener('hashchange', adjustScrollPosition);
  }, []);

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

内容的提问来源于stack exchange，提问作者Pedro Eduardo Garcia