在Next.js中,我遇到了一个问题,当我点击一个链接打开一个新页面时,新页面会在与上一页相同的滚动位置打开。例如,如果我在一个产品列表页面上,向下滚动以查看最后一个产品,当我单击该产品时,产品详细信息页面打开,滚动位置仍然在底部。
我希望页面滚动到顶部时,打开产品详细信息页面。如何在Next.js中实现这种滚动到顶部的行为?
以下是我尝试的可能的解决方案
试试1
import { useEffect } from 'react';
import { useRouter } from 'next/router';
const ProductDetails = () => {
const router = useRouter();
useEffect(() => {
const handleRouteChange = () => {
window.scrollTo(0, 0);
};
router.events.on('routeChangeComplete', handleRouteChange);
return () => {
router.events.off('routeChangeComplete', handleRouteChange);
};
}, [router]);
return <>
// product details code goes here
<>;
};
export default ProductDetails;
试试2
import { useEffect } from 'react';
import { useRouter } from 'next/router';
const ProductDetails = () => {
const router = useRouter();
useEffect(() => {
window.scrollTo(0, 0);
}, [router.pathname]);
return <>
// product details code goes here
<>;
};
export default ProductDetails;
尝试3
import { useEffect } from 'react';
import { useRouter } from 'next/router';
const ProductDetails = () => {
const router = useRouter();
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return <>
// product details code goes here
<>;
};
export default ProductDetails;
试试4
useEffect(() => {
// the top id defined on the container of layout which is navbar
const topElement = document.getElementById("#top");
topElement?.scrollIntoView({ behavior: "smooth" });
}, [router.pathname]);
上面的解决方案适用于其他路由,但是当涉及到动态路由e.g. /products/product/[slug]
时,它不起作用,即使我在useEffect依赖数组中添加slug
注意:也尝试直接进入该组件的代码,我想在顶部的屏幕移动,但仍然没有实现我想要的。
已编辑:添加了支持的代码示例
1条答案
按热度按时间ttp71kqs1#
所以在探索了很多之后,我遇到了一个解决方案,当我看到它时,我笑了。
问题不在Next.js组件上。这是global.css文件中预定义的CSS的问题。
默认情况下,Next.js global.css包含大量CSS。它还为body和HTML标签定义了CSS,如下所示:
从
html/body
标签中删除overflow-x: hidden
后,一切都开始正常工作。所以,我很感谢@divine对另一个Stack Overflow问题的回答,这个问题涉及到同一个问题here is the link to his answer。