不知道这是否是nextJS的一个新功能，因为我以前的nextJS项目没有这个问题，但当我在一个页面的底部，想要转到另一个页面时，它会在目标页面上显示一个滚动到顶部的画面。
我想进入目的地页面，在顶部，但没有这个"；"平滑滚动"；动画
(我的css中没有任何平滑的行为(
在NextJs的文档中，他们说你可以通过将滚动设置为false来删除滚动，但如果我这样做，当我到达目的页面时，我将位于目的页面的底部(如果我点击开始页面时，位于底部(
我的应用程序文件：
import '../styles/main.scss'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
如何在布局中声明我的链接组件和导航：
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>
</Head>
<header>
<Nav />
</header>
<main>
{children}
</main>
<TopFooter />
<div className="wrapper mx-auto">
<footer className="pb-md-7 pb-6">
<div className="row mt-7">
<nav className="col-xs-11 col-xsm-11 col-sm px-lg-0 pt-md-0 pt-3">
<ul className="navbar mt-lg-3 ps-xs-0 px-sm-0">
<li className="pe-sm-0 ">
<Link href="/legal/aml-kyc-policy">
<a>AML/KYC
policy</a>
</Link>
</li>
<li className="pe-sm-0 ps-xsm-0 legalMention">
<Link href="/legal/mentions">
<a>Legal
Mention</a>
</Link>
</li>
<li className="pe-sm-0 ps-xsm-0 pt-1 pt-sm-0">
<Link href="/legal/privacy-policy">
<a>Privacy
Policy</a>
</Link>
</li>
<li className="pe-sm-0 ps-xsm-0 pt-1 pt-sm-0">
<Link href="/legal/cookies-policy">
<a>Cookies Policy</a>
</Link>
</li>
</ul>
</nav>
</div>
<script> </script>
</footer>
</div>
</>
);
}
somoene能帮我解决这个问题吗？
非常感谢
您可以通过直接针对(A(根id或(b(整个应用程序的主体来全局设置此项。scroll-behavior: smooth(nextjs将其用于链接组件(尝试scroll-behavior: auto !important
例如，在我的全局css文件中，我的目标是#__nextid:
#__next {
display: flex;
flex-direction: column;
min-height: 100vh;
}
我还针对html和body标签：
html {
height: 100%;
box-sizing: border-box;
touch-action: manipulation;
font-feature-settings: 'case' 1, 'rlig' 1, 'calt' 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
/* -webkit-text-size-adjust: none; */
/* text-size-adjust: none; */
}
html,
body {
font-family: var(--font-sans);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--theme-0);
color: var(--text-accents-0);
overscroll-behavior-x: contain;
}
我建议使用其中一个来注入类似的东西
a:link {
scroll-behavior: auto !important;
}
从嵌入链接的<a></a>中删除平滑滚动行为(链接组件最终在浏览器中编译为<a></a>标签(
对于我来说，因为我将NextJs与Bootstrap一起使用，我发现当我禁用Bootstrap时，它工作得很好，我后来发现，我只需要将滚动行为添加到auto中。