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.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (5)
Bir kaç defa katıl üyesi olmuştum fakat şu anda değilim. Emin misiniz aynı konu olduğuna? Akşam ona göre katıl alırım. Birde NextJS ile kodlanıyor o seride?
Bu şekilde yaptığım zaman her sayfa geçişinde sayfa yeniden yükleniyor. Tek çözüm bu mu acaba? Her hangi bir hook kullanmadan yapılma ihtimali nedir?
useEffect(() => window.scroll(0,0), [])
Bide css de scroll behaivor smooth yaparsan,
kaymak gibi calisiyor
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