NextJS13 App versiyon, router değiştiğinde içeriğin en üstüne nasıl çıkarım?
Bir buton veya link aracılığı ile başka bir route çağırdığım zaman eğer geldiğimde sayfada içerik alanında aşağıya ilerlediysem ve sayfa aşağısında bir yerden geliyorsam diğer sayfada içerik alanında altta kalıyorum.
Örneğin ana sayfada aşağı scrool yaptım bir ürüne ait kart üzerinden incele dedim detay sayfasına geldim diyelim. Bu durumda diğer sayfada aynı hizada kalıyorum, sayfanın en üstünden başlamıyor. Mesela footer hizasından başlıyor doğal olarak içeriği görmek için yukarı scrool yapmam gerekiyor.
Bunun çözümünü bilen var mı? Araştırdığımda hooklar ile çözenler var fakat bu durumda bütün uygulamayı client side çevirmem gerekir. Benim uygulamamın büyük bölümü SSR çalışıyor.
Ssr sadece verinin client'a iletme kısmında çalışır. Client kısımda hook ile en üste çıkmasını sağlayabilirsin.
useEffect(() => {
router.events.on("routeChangeComplete", () => {
console.log("route change routeChangeComplete");
if(typeof window !== "undefined")
window.scrollTo({ top:0 });
});
return () => {
router.events.off("routeChangeComplete", () => {
console.log("stoped");
});
};
}, [router.events]);
Bu kodu app.js ' e koyarsan her bir route değişimini kontrol edebilirsin. Her route değişiminde en üste scrollarsın