不知道这是否是 nextJS 的新功能,因为我之前的 nextJs 项目没有这个问题,但是当我在页面底部并且我想转到另一个页面时,它会出现一个滚动位于目标页面的顶部。
我想进入目标页面的顶部,但没有这种“平滑滚动”动画。
(我的 CSS 中没有任何流畅的行为)
在 NextJs 文档中,他们说你可以通过将滚动设置为 false 来删除滚动,但如果我这样做,当我到达目标页面时,我将位于目标页面的底部(如果当我单击开始页面时我是在底部 )
我的应用程序文件:
import '../styles/main.scss'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
Run Code Online (Sandbox Code Playgroud)
我如何在布局中声明我的链接组件和导航:
import { useRouter } from "next/router";
import Link from "next/link";
import Nav from "./shared/nav";
import { useEffect } from "react";
export default function Layout({ children, page }) {
const router = useRouter();
{/* https://css-tricks.com/transitions-only-after-page-load/ */ }
useEffect(() => { document.querySelector("body").classList.add("preload") });
return (
<>
<Head>
<title>{page}</title> …Run Code Online (Sandbox Code Playgroud)