Web’deki tüm ücretsiz script dizilerinde, en basit şey yukarıdan aşağıya doğru sayfayı kaydırma eklentisidir. Bu, sayfanın altına tıklandığında, pencereyi otomatik olarak sayfanın en üstüne doğru kaydırdığı küçük bir ok ekler. Daha uzun blog makaleleri ve daha uzun açılış sayfaları için popüler bir seçimdir. Ziyaretçilerinizi tek bir tıklamayla sayfanın en üstüne geri götürmek için aşağıdaki jQuery eklentilerini kullanabilirsiniz. 1. ScrollUp Listedeki ilk olarak ücretsiz bir jQuery eklentisi ScrollUp. Oldukça basit ve sadece bir kod satırıyla çalışabilir. Temel olarak sadece $.scrollUp() işlevini harekete geçirmek için hangi öğenin tıklanması gerektiğine izin verin. Bu, küçük ok özelliğini genellikle sitenize manuel olarak eklemeniz gerektiği anlamına gelir. Ancak GitHub dokümanlarına bakarsanız, önceden oluşturulmuş bir ok için CSS ve JS kodları içeren bir örnek snippet bulacaksınız. Kurulumu kolay, özelleştirmesi kolay ve çok sayıda demo örneği . 2. Material ScrollTop Bu tür kaydırma özelliği için materyal tasarımı ile çalışmayı hiç düşündünüz mü? Ana başlığın altında ilerlerken küçük bir materyal ok simgesi belirir. Sanırım ne işe yaradığını tahmin edebilirsin. Bu, Google'ın materyal yönergelerini izleyen herhangi bir mizanpajla harmanlanmalı ve jQuery'de kusursuz şekilde çalışır. 3. jQuery Scroll Top Nasıl çalıştığını görmek için bazı kodları ayırmak istiyorsanız, Karen Grigoryan'ın kaydırma özelliğini seveceksiniz. Bu bir eklenti gibi çalışmıyor ama jQuery'nin üstünde çalışıyor. Kurulum süper kolaydır, çünkü sadece CodePen'den kopyalayıp yapıştırabilirsiniz. CSS stillerinin bu konuda istenecek çok şey olduğunu unutmayın. Komut dosyasını kendi sayfanıza taşıyor olsanız da, yine de özelleştirmek için boş bir sayfa listesi isteyeceksiniz. 4. Return To Top Arrow İşte CodePen'den yukarı ok animasyonuyla başka bir örnek. Yine bu jQuery üzerinde çalışır ve kod oldukça iyi yorumlanmıştır. Ayrıca buradaki ok tasarımı gerçekten çok güzel. Temelde herhangi bir düzen ile çalışabilir. 5. Smooth Scroller Bu snippet belki de en basit olanıdır. Ok simgesi sabit şekilde konumlandırılmıştır, böylece kapsayıcının içinde çalışır, ancak ana sayfa gövdesinde de sabit olarak çalışabilir. Bu jQuery kodu okunmayacak kadar iyi değildir, bu yüzden onu toplamaya başlamadan önce JS ile yolunuzu bilmeniz gerekir. Hala kendi başınıza kopyalayabileceğiniz harika bir çalışma demosu. 6. jQuery & Vanilla JS Bu CodePen demosuyla, hem Vanilla hem JavaScript hem de jQuery'de çalışan en üstteki kaydırma özelliklerinden örnekler bulacaksınız. Her iki kod birbirinden ayrılır fakat çok fark yoktur, bu yüzden onları ayırmak kolay değildir. Çok fazla JavaScript bilmiyorsanız, bu, sitenize eklemek için zor bir snippet olabilir. Ama aynı zamanda jQuery veya sade JS arasında seçim yapmak isteyen herkes için harika bir kaynak. 7. Pure JavaScript Scroll JQuery kitaplığı, kodun içine yerleştirilmiş kendi scrollTo() işlevine sahiptir. Ancak herkes her proje için jQuery'yi sevmez. Bu yüzden geliştirici Erick Tatsui bu kodu oluşturdu. Tamamen JavaScript ile oluşturulmuş ücretsiz bir kaydırma işlevi. Bu şekilde, zaten bir komut dosyası dosyanız varsa, tüm kaydırma işlemini sıfırdan kodlamanız gerekmez. Sadece bu işlevi sitenize ekleyin ve uygun ok öğesini hedefleyin! 8. Vue BackToTop Vue.js yerleşimleri, genellikle Vue kitaplığının üstünde çalışan bileşenler ile oluşturulur. Gerçekten harika bir örnek, bu Vue.js to-top kaydırma komut dosyasıdır. Yerel bir Vue bileşeni olarak çalışır ve sayfanızdaki herhangi bir şeye müdahale etmez. Bunun nasıl çalıştığını kontrol etmek için canlı bir örnek görebilirsiniz. Ve bu da iki düzenlenebilir seçenekler ile birlikte gelir: düğme metni ve kaydırma düğmesini göstermeden önce gereken toplam piksel gibi. Belki de her web geliştiricisi için kullanışlı değil ama Vue'da çalışıyorsanız kesinlikle harika bir özellik. 9. CodyHouse Back To Top Kaydırma okunun bu gerçekten güzel örneği, kodu herhangi bir web sitesine kolayca kopyalamanıza / yapıştırmanıza olanak tanır. Aslında bir kopyasını indirmeden önce kontrol etmek istiyorsanız oldukça açık bir demo sayfası var. Ayrıca, ana makale sayfasında bunun nasıl oluşturulduğunu ve bunu kendi başınıza nasıl kopyalayabileceğinizi açıklayan tam bir öğretici bulunur. En büyük sorun, GitHub veya açık kaynaklı desteğin olmamasıdır. 10. fullPage.js FullPage.js ile özel kaydırma özelliklerine biraz daha göz atalım. Bu kütüphane sadece kaydırma işlemini kişiselleştirmez veya kullanıcıları sayfada daha yükseğe zıplamaya zorlamaz. Bunun yerine, bu eklenti sayfanızın düzenini özel kaydırma konumlarıyla kontrol etmenizi sağlar. Temelde içerik arasında zıplayabileceğiniz tek sayfa bölümleri tanımlamanızı sağlayan bir sayfa kaydırma eklentisidir. Güzel bir tasarıma sahiptir ve kaydırma özelliklerinin özelleştirilmesi süper kolaydır. Ancak bunun, sadece basit bir yukarıdan-aşağıya kaydırma düğmesi isteyen biri için aşırı bir olasılık olabileceğini anlıyorum. Yine de tek sayfa düzenleri de inşa eden devler için güzel bir seçenek. 11. dyScrollUpJS DyScrollUpJS, bulabileceğiniz en basit JS eklentilerinden biridir. Yalnızca birkaç ay önce piyasaya sürüldü ve hala ES6 / JS kodunda çalışmak için yarı sık güncellemeler alıyor. Gözlerinizi ekranın sağ alt köşesinde tutarsanız, belge sayfasında aslında küçük bir demo var. Bu sayfada bir demo, örnek bir video, kod snippet'leri ve bunu sitenizde yayınlamak için çalışan temel belgeler bulunur. 12. Smooth Scroll Smooth Scroll eklentisi ile jQuery ortamına geri dönüyoruz. Bu, herhangi bir JS seçeneğini desteklemez ve çok sık güncellenmesi gereken bir şey değildir. jQuery'de çalışan gördüğüm en hafif seçenek. Bu temelde tek bir kod satırında çalışır ve pek çok özel seçeneğe sahip değildir. Bilmeniz gereken her şey, ana kaynak kodunun indirme bağlantıları dahil olmak üzere GitHub sayfasındadır. Sadece bir kopyasını alın, sitenize yerleştirin, ok öğenizi hedefleyin ve sürmesine izin verin. 13. Simplescrollup Saf JavaScript tarafından destekleniyor, dolayısıyla herhangi bir bağımlılığı yok. Komut satırında çalışan web geliştiricileri için harika bir araç. Fikir oldukça basit: her şey ok öğesindeki sınıflar aracılığıyla kontrol edilir. Böylece, kullanıcı oku tıkladığında, her şeyi en üste geri getirmek için bir JS işlevi çalıştırır. Kodlar, kurulum daha fazla bilgi için GitHub'a bir göz atın.
