点击链接后如何go到页面顶部？

Question

The problem is, it goes to the middle of the page whenever I navigate to a link in NextJS :

<Link href={`/products/${id}`} key={id}>
   <a>
      {/* other components */}
   </a>
</Link>

So i think the problem is that the link is on the middle of the page so when i click on the link it stays on the same position as where u clicked the link and not go at the top of the page. I know it doesn't make sense.

I tried adding things like scroll={true} , or scroll={false} to the <Link> . Tried adding height: 100% to html and body in CSS . I tried adding scroll-behavior: smooth; and other stuff. The problem still stays.

Heres the video: https://drive.google.com/file/d/1CCgFCJb1fl9RRYmW5yp41US-0yuSqpfj/view?usp=sharing

Answer 1

In your page component, inside useEffect hook, put window.scrollTo(0,0)

useEffect(()=>{
  window.scrollTo(0,0);
},[])

Answer 2

Try to set scrollRestoration in some root component.

 history.scrollRestoration = 'manual';

Answer 3

you can use this hook and put id as it's dependency

useEffect(() => {
   window.scrollTo({
          top: 0,
          left: 0,
          behavior: "smooth"
        });
}, [id])

if you use it in nextjs, you need to put an if condition in this way

useEffect(() => {

if(typeof window !== 'undefined'){
   window.scrollTo({
          top: 0,
          left: 0,
          behavior: "smooth"
        });
   }
}, [id])