jQuery Dersleri

jQuery İle Scroll İndikçe İlerleme Çubuğu Hazırlama

jquery dersleri

Bu makalede jQuery ile scroll’u indirdikçe sayfanın en üstünde ilerleyen bir çubuk yapacağız. Bu uygulama sayfada yer alan makalenin bitimine ne kadar kaldığını gösterecektir. Bu örneği sadece ilerleme çubuğu olarak bırakmayıp daha da geliştirebilirsiniz. Örneğin, scroll ilerledikçe belirli bir yerde (%50 gibi) sağ altta bir kutucuk gösterebilirsiniz. Yada %100 tamamlandıktan sonra bir sonraki gönderiyi direkt sayfanın altına yazdırabilirsiniz.

Geliştirme aşamasına geçmeden önce jQuery ile scroll’u indirdikçe gerçekleşen progress bar’ın nasıl yapıldığına deyinelim.

Sayfa İskeletini Oluşturma

Öncelikle bir HTML yapısı oluşturuyoruz. Script alanına jQuery kütüphanesini ekliyoruz. Ayrıca CSS alanını ve yazacağımız jQuery kodlarının bölümünü yine iskelette oluşturuyoruz.

Css Kodlarını Hazırlama

Gerekli iskeleti oluşturduktan sonra aşağıda yer alan kodları CSS bölümüne yazınız. Burada hazırlayacağımız kodda bir takım görsellikler veriyoruz.

Yukarıdaki kodları iskelette yer alan script alanına yazmanız yeterli olacaktır.

jQuery Kodlarını Hazırlama

Son olarak jQuey ile ilerleme çubuğunun ayarlanmasına. Buradaki mantık şudur; içeriğin yükseklik değerinden, pencerenin yükseklik değeri çıkartılır. Sonrasında elde edilen değer 100 ile çarpılarak scroll’un şuandaki durumuna bölünür. Böylelikle sayfa içinde ne kadar aşağıya inildiği yüzde olarak bulunur.

Yukarıda yer alan CSS ve JQUERY kodlarını iskelette birleştirdiğinizde, sayfayı aşağıya indirdikçe tepede ilerledikçe dolan bir bar göreceksiniz. Bu bar, sayfanın yükseklik ve scroll değeri hesaplanarak bulunmaktadır.

DOSYALARI İNDİR - YANDEX

Bir önceki yazım olan jQuery ile Formdaki Şifreyi Görüntüleme başlıklı makalemi de okumanızı öneririm.

İlgilizi Çekecek Konular

jQuery ile Yukarı Çık Butonu Yapmak

ibrahim Çevrük

jQuery ile Nesnenin Genişlik ve Yüksekliğini Alma

ibrahim Çevrük

jQuery ile Sayaç (Kronometre) Yapımı

ibrahim Çevrük

2 Yorumlar

Avatar
Yusuf Aytanözü 8 Nisan 2019 at 19:10

Ellerine sağlık hocam. Güzel konulara değindiğini farkettim.
Haber sitelerinde altlara doğru ilerledikten sonra geri tuşuna basınca önceki başlığa geçiyor. Bunu nasıl yapabilirim?

Cevap
ibrahim Çevrük
ibrahim Çevrük 29 Mayıs 2019 at 17:38

Scroll dolduğunda $ajax metodu ile bulunulan id değerinden önceli veriyi alıp makalenin altına jquerydeki html() metodunu kullanarak yazdırabilirsin.

Cevap

Yorum Giriniz