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.com’da Yalnızca CSS ile yumuşak “Başa Dön/Back to Top” kaydırma veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, Yalnızca CSS ile yumuşak “Başa Dön/Back to Top” kaydırma için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.