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.
- Tam ekran için: https://saf-css-ile-back-to-top.glitch.me
- Alternatif CodePen: https://codepen.io/wolkanca/pen/dypEgzN
- Eskiden çok eskiden: https://web.archive.org/web/20110413163553/https://webdesignerwall.com/tutorials/animated-scroll-to-top