为什么Nextjs链接滚动到顶部不工作,当我改变路线

bt1cpqcv  于 2023-06-29  发布在  其他
关注(0)|答案(3)|浏览(193)

我正在使用下一个/链接,但当我改变路线,滚动到顶部不工作。

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

我该怎么办?我尝试了太多的方法,但没有结果。

gc0ot86w

gc0ot86w1#

您的代码使用scroll={false}禁用了滚动到顶部
通过文档:
Link的默认行为是滚动到页面顶部。当有一个散列定义时,它会滚动到特定的id,就像一个普通的标签一样。为了防止滚动到顶部/散列,可以将scroll={false}添加到链接:
删除scroll={false}以解决问题。

inn6fuwd

inn6fuwd2#

所以,我用这种方式解决了这个问题:

import { useEffect } from "react";
import { useRouter } from "next/router";
export default function ToTop(){
    const router = useRouter();
    useEffect(()=>{
      const handleRouteChange = () => {
          document.getElementById('top').scrollIntoView();
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    },[]);

    return ('');
}

但我不喜欢

ncgqoxb0

ncgqoxb03#

您可以创建此组件并将其导入到要滚动到顶部的页面上。
如果你使用的是比NextJS 13更老的版本,那么只需要删除“使用客户端”;.

// 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;

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

相关问题