nextjs 将我带到一个带有链接的新页面

Question

现在我正在努力做到这一点，以便当我单击导航栏上的文本时，它会向下滚动到 nextjs 中的部分。我有以下代码：

 <Link href="#About">About</Link>
 <Link href="#Sponsors">Sponsors</Link>
 <Link href="#FAQ">FAQ</Link>

这是导航栏，例如，当我点击赞助商时，我想转到赞助商页面

关于、赞助商和常见问题解答是页面上的部分，您可以在此处看到：

所以这是有效的，但它打开了一个我不想要的新标签。我希望它向下滚动到赞助商所在的位置

Answer 1

使用 anchor tags 而不是 Link 组件。 Link 组件用于 Next 中不同页面之间的导航，但在您的情况下，您希望停留在同一页面上，只是滚动到不同的部分。

<a href="#About">About</a>
<a href="#Sponsors">Sponsors</a>
<a href="#FAQ">FAQ</a>

确保要滚动到的元素的 id 属性与锚标记中的 href 属性的值相匹配。例如，如果您想滚动到 Sponsors 部分，代表该部分的元素应该有一个值为 Sponsors 的 id 属性。这是一个可能看起来像的示例：

<div id="Sponsors">
  ...
</div>

当您单击 Sponsors 链接时，页面将向下滚动到 id 属性为 Sponsors 的 div 元素。