小编syl*_*n s的帖子

使用 Link 组件删除 NextJS 中更改页面时的平滑滚动动画

不知道这是否是 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)

javascript reactjs next.js

1
推荐指数
1
解决办法
4390
查看次数

标签 统计

javascript ×1

next.js ×1

reactjs ×1