NextJS点击Link组件锚点无法正确滚动到对应id位置如何解决？

第一步：修复Link组件语法错误 #

在components/Member.js中，修正Link的href属性写法，补全缺失的等于号：

<Link 
  id="membre" 
  href={`/membres/${membres.slug}#membre-anchor`}
  ariaLabel="Scroll to #membre-anchor"
> 
  <a>{membres.name}</a>
</Link>

你之前漏写了href=的等于号，属于基础语法错误，优先修复。

第二步：自定义锚点滚动逻辑 #

你遇到的滚动位置错误，本质是默认滚动触发时页面资源还没加载完成：你绑定的锚点是img元素，图片未加载完成时高度为0，浏览器提前计算的滚动位置在图片加载完成后就会出现偏移，最终滚动到区块底部。同时你之前写的gsap点击事件无效，是因为点击触发时还在当前页面，目标页面的锚点元素还不存在，自然无法滚动。

在目标页面pages/member/[slug].js中添加加载完成后滚动的逻辑：
首先在文件顶部引入useEffect：

import { useEffect } from 'react';

然后在组件内添加逻辑：

export default function Member({ membre, membres, categories, quote, types }) {
  useEffect(() => {
    const hash = window.location.hash
    if (hash) {
      // 等待页面所有资源加载完成后再执行滚动
      window.addEventListener('load', () => {
        const targetEl = document.querySelector(hash)
        if (targetEl) {
          // 原生滚动实现，不需要依赖gsap
          targetEl.scrollIntoView({
            behavior: 'smooth',
            block: 'start' // 对齐元素顶部，就是你要的效果
          })
        }
      })
    }
  }, [])

  // 原有return逻辑保持不变
  return (
    // 原有代码
  )
}

如果要继续使用gsap实现滚动，需要先注册ScrollTo插件，再替换滚动逻辑即可：

// 顶部引入依赖
import gsap from 'gsap'
import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
gsap.registerPlugin(ScrollToPlugin)

// 把上方的scrollIntoView部分替换为：
gsap.to(window, {
  duration: 1,
  scrollTo: {
    y: hash,
    offsetY: 0 // 如果页面有固定头部，这里填头部高度做偏移校正
  }
})

第三步：可选优化，提前占位锚点元素 #

给id="membre-anchor"的img元素添加固定高度，避免图片加载前后高度变化导致的滚动偏移：

<img 
  id="membre-anchor" 
  src={membre.img.url}
  width="200" 
  height="200" // 填写和实际图片一致的高度
/>

内容的提问来源于stack exchange，提问作者Rom-888