CODEWITHSUNDEEP
scrolltopnextjs14nextjs-dynamic-routing
san sal
san sal

Reputation: 1

Scroll-to-top not working when Nextjs (14) Link element opens new page

I've built several webapps in nextjs in exactly same way as current one and never had this issue. After clicking Link element in product card it opens new dynamic page depending on product id, but scrollbar and therefore all page jumps to bottom. After clicking same Link for same product id (which page was already rendered) second times it opens page correctly from top.

Neither scroll={true} nor scroll={false} have any effect. Added/removed generateStaticProps - also no effect. I don't have any overflow properties set to interfere with scroll. I can not add client component as page is server component and it is importing react server component.
here is the Link element

<Link href={`/bodycare/${title}/${id} `}>
  <button>view</button>
</Link>;

This Link opens page:

//export const revalidate = 0;
export async function generateStaticParams() {
  const { products } = await getAllProducts();
  const ids = products.map((product) => {
    return { id: String(product.id) };
  });
  return ids;
}

export default function Page({ params }: Props) {
  return (
    <Suspense fallback={<Spinner />} key={params.id}>
      <ProductDetails productId={params.id} />
    </Suspense>
  );
}

Upvotes: 0

Views: 11

Answers (0)

Related Questions