Ogznet.com
Jquery ile Sayfayı Yukarı Kaydırma Paylaş:

Jquery ile Sayfayı Yukarı Kaydırma

Jquery ile Sayfayı Yukarı Kaydırma

Jquery ile Yukarı Çık butonu html kodu

Jquery Yukarı Çık Butonu, siteyi yukarı kaydırma için kullanılan basit ama gerekli bir araçtır. Bu yazımızda, JQuery ile Yukarı Çık Butonu yapımını anlatacağız. Burada yer alan araçlar ile HTML Yukarı Çık kodlarını siteniz için özelleştirebilirsiniz.

Bu yazının içeriği:

Göster
Gizle

Yukarı çık butonu veya sayfa başına dön HTML kodu, bir sayfanın altına inildiğinde, pencereyi otomatik olarak sayfanın en üstüne doğru kaydıran küçük bir ok ekler. Daha uzun blog makaleleri ve daha uzun açılış sayfaları için Yukarı Çık buton uygulaması popüler bir seçimdir.

"Başa Dön" düğmesi, kullanıcıların web sitesi sayfasının en üstüne kaydırmasına olanak tanır. Uzun sayfalara sahip web sitesinde gezinme deneyimini geliştiren küçük bir ayrıntıdır.

Ziyaretçilerinizi tek bir tıklamayla sayfanın en üstüne geri götürmek için aşağıdaki jQuery Yukarı Çık eklentilerini kullanabilirsiniz.

Listedeki ilk ücretsiz jQuery yukarı çık 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ğini belirleyin. 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. Çalışan canlı demo örneklerini görmek için ScrollUp demo adresine tıklayabilirsiniz.

Material ScrollTop - sayfayı yukarı kaydırma butonu

Bu tür sayfayı yukarı kaydırma özelliği için materyal tasarım ile çalışmayı düşünebilirsiniz. Sayfayı aşağı doğru kaydırırken küçük bir materyal ok simgesi belirir. Bu, Google'ın materyal yönergelerini izler ve jQuery ile kusursuz bir şekilde çalışır. Çalışan canlı demo için Material – ScrollTop sayfasını ziyaret edebilirsiniz.

Tamamen özelleştirilebilir bir yukarı çık butonu arıyorsanız, Karen Grigoryan tarafından yapılmış olan bu yukarı kaydırma butonunu çok seveceksiniz. Bu bir eklenti gibi çalışmıyor ama jQuery kütüphanesi ile bağlantılı olarak çalışıyor. Kurulum oldukça kolaydır, çünkü sadece CodePen'den kodları kopyalayıp yapıştırabilirsiniz. CSS stillerinin isteğinize göre özelleştirebilirsiniz.

Return To Top Arrow, CodePen'den yukarı ok animasyonuyla ilgili başka bir örnektir. Yine bu eklentide 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 tasarım ile birlikte çalışabilir.

Smooth Scroller - Bu snippet belki de en basit yukarı çık butonudur

Bu snippet belki de en basit yukarı çık butonudur. Ok simgesi sabit şekilde konumlandırılmıştır. CSS kodlarını ve yukarı çık butonu simgesini istediğiniz gibi özelleştirebilirsiniz. Diğer yukarı çık butonları gibi aynı mantıkla çalışır.

Bu yukarı çık butonu da CodePen üzerinden yayınlanmaktadır. Hem Vanilla hem JavaScript hem de jQuery'de çalışan, sayfayı yukarı kaydırma özelliklerinden örnekler bulacaksınız. Her iki kod birbirinden ayrılır fakat çok fark yoktur, bu yüzden kullanım açısından bir ayrım yapmak 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 kaynaktır.

JQuery kütüphanesi, kodun içine yerleştirilmiş kendi scrollTo() işlevine sahiptir. Ancak herkes, her proje için jQuery'yi kullanmak istemez. Bu yüzden geliştirici Erick Tatsui bu kodu oluşturdu. Tamamen JavaScript ile oluşturulmuş ücretsiz bir sayfa başına dön kodudur. Bu şekilde bir komut dosyası ile tüm kaydırma işlemini sıfırdan kodlamanız gerekmez. Sadece bu işlevi sitenize ekleyin ve uygun ok simgesini belirleyin.

Vue.js yerleşimleri, genellikle Vue kütüphanesi üstünde çalışan bileşenler ile oluşturulur. Gerçekten harika bir örnek, bu Vue.js yukarı 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çenek ile birlikte gelir: düğme metni ve kaydırma düğmesini göstermeden önce gereken toplam kaydırma yüksekliği (piksel cinsinden) gibi. Belki de her web geliştiricisi için kullanışlı değil ama Vue'da çalışıyorsanız kesinlikle harika bir özellik.

CodyHouse Back To Top - Yukarı kaydırma butonu için gerçekten güzel bir örnektir

Yukarı kaydırma butonu için gerçekten güzel bir örnektir ve çalışması için 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 sitenize 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.

FullPage.js, özel kaydırma özellikleri sunan farklı bir projedir aslından. Bu kütüphane sadece kaydırma işlemini kişiselleştirmez veya kullanıcıları sayfa başıan döndürmez. Bunun yerine, bu eklenti sayfanızın düzenini özel kaydırma konumlarıyla kontrol etmenizi sağlar.

fullPage.js - Güzel Tam Ekran Kaydırma Web Siteleri Oluşturun

Temelde, içerikler arasında geçiş yapabilceğ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 kolaydır. Ancak bu, sadece basit bir aşağıdan yukarıya kaydırma düğmesi isteyen biri için aşırı bir örnek olabileceğini düşünüyorum. Yine de tek sayfa şablonları inşa eden tasarımcılar için güzel bir seçenektir.

DyScrollUpJS, bulabileceğiniz en basit JS eklentilerinden biridir. Bu, web sitenizde ve blogunuzda "Sayaf Başına Dön" düğmesi oluşturmak için kullanabileceğiniz küçük bir JavaScript eklentisidir. Ücretsizdir ve kolayca özelleştirebilirsiniz.

 

Sayfayı aşağı doğru kaydırırken ekranın sağ alt köşesine bakarsanız, Documentation sayfasında bir demo var. Bu sayfada bir demo, örnek bir video, kod snippet'leri ve bunu sitenize eklemek için öğretici temel belgeler bulunur.

Smooth Scroll eklentisi ile jQuery kütüphanesine geri dönüyoruz. Bu, herhangi bir JS seçeneğini desteklemez ve çok sık güncellenen bir eklenti değildir. jQuery'de çalışan gördüğüm en hafif seçenektir. Bu, temelde tek bir kod satırında çalışır ve pek çok özelleştirme seçeneğine sahip değildir.

Bilmeniz gereken her şey, ana kaynak kodunun indirme bağlantıları da dahil olmak üzere GitHub sayfasındadır. Sadece bir kopyasını alın, sitenize yerleştirin, ok öğenizi belirleyin ve çalıştırın.

Simplescrollup - Sayfanın başa döndürmek için Javascript Vanilla kullanan basit bir eklenti

Saf JavaScript tarafından destekleniyor, dolayısıyla herhangi bir kütüphaneye bağımlılığı yoktur. 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 ve daha fazla bilgi için GitHub'a bir göz atın.

Yorumlar
  • Bu yazıya henüz yorum yapılmamış. İlk yorumu yapan siz olun!
Yorum Yaz

AdBlock Tespit Edildi!

Görünüşe göre bir reklam engelleyici kullanıyorsunuz. Sorun yok. Kim kullanmıyor ki?
Ancak reklam geliri olmadan bu siteyi harika yapmaya devam edemeyiz.

Anlıyorum, reklam engelleyicimi devre dışı bıraktım. Girmeme izin ver!