当我更改路线时，为什么 Nextjs 链接滚动到顶部不起作用

Question

我正在使用 next/link，但是当我更改路线时，滚动到顶部不起作用。

<Link href="/some-page" scroll={false}> Go</Link>

我该做什么？我尝试了太多的方法，但没有结果。

Answer 1

您可以创建此组件并将其导入到要滚动到顶部的页面上。

如果您使用的版本早于 NextJS 13，则只需删除“use client”即可。

// scrollToTop
"use client";
import { useEffect } from "react";
import React from "react";

export default function scrollToTop() {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
  return null;
}

将其导入到要滚动到顶部的页面上：

// examplePage
import React from "react";
import ScrollToTop from "./scrollToTop"; // imported scroll to top

const Page = () => {
  return (
    <>
      <ScrollToTop />
      <div>Text...</div>
    </>
  );
};

export default Page;

现在，每当您进入或刷新页面时，它总是会滚动到顶部。

Answer 2

您的代码通过使用禁用滚动到顶部scroll={false}

通过文档：

Link 的默认行为是滚动到页面顶部。当定义了哈希值时，它将滚动到特定的 id，就像普通标签一样。为了防止滚动到顶部/哈希滚动= {false}可以添加到链接：

删除scroll={false}即可解决。