在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
注意：也尝试直接进入该组件的代码，我想在顶部的屏幕移动，但仍然没有实现我想要的。
已编辑：添加了支持的代码示例