syl*_*n s 1 javascript reactjs next.js
不知道这是否是 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>浏览器中的标签）
| 归档时间： |
|
| 查看次数： |
4390 次 |
| 最近记录： |