通过链接组件打开新页面时，滚动到顶部行为在 Next.js 中不起作用

Question

在 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，它也不起作用

注意：还尝试直接将代码放入该组件中，我希望屏幕移动到顶部，但仍然没有达到我想要的效果。

编辑：添加了支持的代码示例

Answer 1

因此，经过大量探索后，我找到了一个解决方案，当我看到它时，我笑了。

问题不在于 Next.js 组件。这是 global.css 文件中预定义 CSS 的问题。

默认情况下，Next.js global.css 包含大量 CSS。它还定义了 body 和 HTML 标签的 CSS，如下所示：

html,body {
  max-width: 100vw;
  overflow-x: hidden;
}

overflow-x: hidden从标签中删除后html/body，一切开始按预期正常工作。

因此，我感谢 @divine 对另一个 Stack Overflow 问题的回答，该问题提到了同一问题，这里是他的答案的链接。