用链接组件删除NextJS中更改页面上光滑的滚动动画
不知道这是否是nextJS的一个新特性，因为我以前的nextJs项目没有这个问题，但是当我在页面的底部，我想转到另一个页面时，它会出现在目标页面的顶部。
我想去目标页面，在顶部，但没有这个“平滑滚动”动画。
(我的css中没有任何流畅的行为)
在NextJs文档中，他们说您可以通过将滚动设置为false来删除滚动，但是如果我这样做，当我到达目标页面时，我将位于目标页面的底部(当我单击开始页面时，我位于底部)
我的应用程序文件:
import '../styles/main.scss'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp如何在布局中声明链接组件和nav：
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>
</>
);
}能帮我解决这个问题吗？
非常感谢
回答 2
Stack Overflow用户
发布于 2021-07-14 04:11:54
您可以通过直接针对(A)根id或(b)整个应用程序的主体来设置全局设置。scroll-behavior: smooth (nextjs使用它的链接组件)尝试scroll-behavior: auto !important
例如，在我的全局css文件中，我以#__next id为目标：
#__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>标记)
Stack Overflow用户
发布于 2021-10-01 17:15:43
对于我的，因为我使用NextJs和Bootstrap，我发现当我禁用引导程序时，它工作得很好，我后来发现的是，我只需要向auto添加滚动行为。
https://stackoverflow.com/questions/68362273
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号