Kategoriler
Kodlama

Yalnızca CSS ile yumuşak “Başa Dön/Back to Top” kaydırma

Eskiden site içerisindeki #internal linklerin yumuşak kaydırılması için JavaScript kullanmak zorundaydık ama artık değil.

Ben web uygulamalarında eğer bir şey CSS ile yapılabiliyorsa onun için ek JavaScript yazmanın gereksiz olduğunu düşünenlerdenim. Modern tarayıcıların tamamının desteklediği CSS ile birçok şey artık yapılabiliyor, buna bir örnek de scroll-behavior: smooth;.

Saf CSS ile aşağı doğru uzun sayfalarda yukarı kaydırma/başa dön(back to top) bağlantısı yaptım, buradan kodları inceleyip test edebilirsiniz:

Sonuç aşağıdaki gibi, sayfayı aşağı doğru kaydırırsanız(scroll y) sağ altta yukarı çık ok işaretini görebilirsiniz.

Bu uygulamada bazı değişik ekranlarda ve sayfa yeterince uzun değilse sorunlar olabilir, top: calc(100vh – 5rem); verdiğimiz için dikkatli kullanılması önerilir. Yine de gereksiz birçok JS kodundan kurtardığı için iyi bir şey.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO volkan@volkanyilmaz.com.tr