我遇到了一个问题——当我更新网站上的页面时Next.JS，滚动会使用户稍微向上移动。也就是说，如果您按 F5 足够多次，您就可以滚动到页面的开头。
我禁用了所有样式、所有不必要的组件，尝试禁用缓存，尝试在不同的浏览器中操作，尝试重新安装所有依赖项 — — 但这些都没有帮助。
如果需要的话，项目中会使用以下依赖项：
"dependencies": {
"@reduxjs/toolkit": "^2.6.1",
"@tailwindcss/postcss": "^4.1.2",
"next": "^15.2.4",
"postcss": "^8.5.3",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-redux": "^9.2.0",
"sass": "^1.86.0",
"tailwindcss": "^3.4.17"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"autoprefixer": "^10.4.21",
"typescript": "^5"
}
我还提供了主要代码layout：
//@ Styles
import "@styles/globals.scss"
//@ Components
import Panel from "@components-layouts/Panel"
import Footer from "@components-layouts/Footer"
//@ Modules
import metadataFile from "@config/metadata"
import { RootLayoutInterface } from "@typescript-interfaces/layout"
export const metadata = metadataFile
const RootLayout: React.FC<RootLayoutInterface> = ({ children }) => {
return (
<html lang="ua">
<body>
<div className="contentBlock">
<Panel/>
<div className="bg-white_cl MainBlock">{children}</div>
</div>
<Footer/>
</body>
</html>
)
}
export default RootLayout
一般风格如下globals.scss：
@use "./variables.scss" as vars;
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "Plus Jakarta Sans";
src: url("../assets/fonts/PlusJakartaSans-VF.ttf");
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, a {
width: max-content;
font-family: "Plus Jakarta Sans";
font-variant-ligatures: none;
color: vars.$d-green !important;
}
html {
height: 100%;
background-color: vars.$dark-cl;
}
body {
width: 100%;
height: 100%;
background-color: vars.$beige;
display: flex;
flex-direction: column;
align-items: end;
min-height: max-content;
padding: 55px 5%;
}
.contentBlock {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: start;
gap: 20px;
margin-bottom: 55px;
width: 100%;
}
.MainBlock {
display: flex;
justify-content: center;
position: relative;
min-height: 221px;
height: auto;
width: 100%;
padding: 50px;
border-radius: 25px;
box-shadow: vars.$block-shadow;
}
@media screen and (max-height: 320), screen and (max-width: 600px) {
.contentBlock {
flex-direction: column;
width: 100%;
}
}
删除所有样式和不必要的组件：
//@ Modules
import { RootLayoutInterface } from "@typescript-interfaces/layout"
const RootLayout: React.FC<RootLayoutInterface> = ({ children }) => {
return (
<html lang="ua">
<body>
<div className="contentBlock">
<div className="bg-white_cl MainBlock">{children}</div>
</div>
</body>
</html>
)
}
export default RootLayout
问题仍然存在，但是转变并不像完整代码那么强烈。据我所知，我的组件和风格只是增强了这种效果，而且它要么与我自己，Next.JS要么与layout.tsx
如果需要的话，我会提供项目的其他部分。
提前感谢您的帮助！
