mehmetduran.com - Paylaşmak Güzeldir...
jQuery ile 'Yukarı Çık' Uygulaması
Bu yazımda jQuery ile 'Yukarı Çık' uygulamasını yani sayfada scroll bir miktar aşağı kaymış ise sayfayı tekrardan en üste animasyonla nasıl getireceğimizi göstermeye çalışacağım. Kodlarını vereceğim örnekte sayfayı sadece en üste animasyonla taşırken, kodlarda yapacağımız ufak değişiklikler ile scroll'u herhangi bir kontrol mesafesine de taşıyabiliriz. Bunu kullanacaklara bırakalım. Bu uygulamayı kendi bloğuma da entegre ettim. Bloğumda belli bir alanı geçince sağ alt köşede uyarı beliriyor. Bu uyarıya tıklayınca da sayfa yukarı animasyonla taşınıyor. Şimdi uygulamaya ve jQuery kodlarına bakalım.

Yazmamız gereken jQuery kodlarına bakalım.

 
  <script type="text/javascript">
      $(function() {
          $("#top").click(function() {
              // sayfamızı kaydıran kod
              $("html,body").stop().animate({ scrollTop: "0" }, 1000);
          });
      });
      $(window).scroll(function() {
          var uzunluk = $(document).scrollTop();
          // 300 değeri sabit bir uzunluk
          // herhangi bir elemente göre yukarı elementini 
          // aktifleştirmek istersek o elementin top değerini bulup
          // bu değere göre yukarı elementini aktifleştirebiliriz.
          // if(uzunluk < $("#alanId").position().top) gibi.
          if (uzunluk > 300) $("#top").fadeIn(500);
          else { $("#top").fadeOut(500); }
      });
  </script>
 

Bu şekilde bir kodlama ile istediğimiz elemente tıklandığında scroll'u en tepeye animasyonla taşıyoruz. Bloğuma da bu uygulamayı eklemiş bulunuyorum. Bu uygulamada kolaylık sağlayan en önemli nokta ScrollTop özelliği. Bu özellik ile herhangi bir elementin en tepeye olan uzaklığını elde edebiliyoruz veya en tepeye olan uzaklığını ayarlayabiliyoruz. Bu özellikten faydalanarak sayfamızı en üst noktaya taşıyoruz. Ayrıca taşıma işlemini gerçekleştirecek olan elementin görünürlüğünü ise yine bu özellik sayesinde belirliyoruz.

Örnekte ve bloğumda 'Yukarı Çık' yazısını sağ alt köşede sabit olarak görebilirsiniz. Bu konumu yazdığım Css ile belirledim. Değiştirmek isterseniz Css kodlarıyla oynamız gerekir.

Hazırladığım örneği bloğumda veya burada scroll'u bir miktar kaydırarak görebilirsiniz.

İyi Çalışmalar.
Mehmet Duran 06 Eylül Pazar 2009 12 34551 4,6
jQuery Javascript Jquery Html Css Blog Güncelleme Tasarım-Görsellik Scroll
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Jquery ile Tab Kontrol Uygulaması Jquery ve Ajax ile Kullanıcı Kontrollerini Kullanma - 1 Pageboss ile Sitenizin Değerlerini Öğrenin - Site Tanıtımı 'İlgili Yazılar Bölümü' Kullanımda Jquery ile Değişir Alan Yapımı (Güncelleme)
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Crown 06 Eylül Pazar 2009 22:10 #1
Ellerine sağlık, güzel bir anlatım olmuş .
sefa 08 Eylül Salı 2009 17:59 #2
gerçekten güzel bir uygulama ama herzamanki gibi tarayıcıların web ile uğraşan arkadaşlara zulümleri devam ediyor ie güzel çalışıyor mozilla çalışmıyor en azından benim kullandığım sürümde( Firefox/3.0.8) opera hatalı çalışıyor (keşke şu tarayıcılar ortak bir nokatada buluşsalarda biz de bu kadar uğraşmasak :)) emeğine sağlık
Mehmet Duran 08 Eylül Salı 2009 20:49 #3
Çalışmama durumunun jQuery kodlarından kaynaklandığını düşünmüyorum. Element seçerken yaptığım tercihin sebep olması gerekir. Bilgisayarımda eskiden olduğu gibi tarayıcıların çeşitli versiyonları olmadığı için son versiyonları kullanıyorum ve sorunsuzca çalışmakta. Ancak diğer versiyonları da deneyip sorunu çözmeye çalışacağım.
Hacı KİŞİ 13 Eylül Pazar 2009 11:20 #4
mehmet bey css dosyasına link verebilirmisiniz.
Mehmet Duran 13 Eylül Pazar 2009 11:33 #5
Örnek için hazırladığım sayfanın html kaynağında css kodları görebilirsiniz. Buradan örnek sayfasına ulaşabilirsiniz.
Salih Gedik 14 Eylül Pazartesi 2009 00:22 #6
Eline sağlık. David Walsh vardı. Mootools takımından oda böyle birşey yazmıştı Mootools ile. Bir an ona benzettim :)
Ahmet ŞAŞMAZ 25 Ekim Pazar 2009 13:43 #7
Çalışmalarınızı paylaşmanız harika.Yazılarınızı ilgiyle takip etmeye başladım.
muhammed mert 01 Temmuz Perşembe 2010 19:48 #8
gayet güzel olmuş. lakin opera tarayıcısında diğer tarayıcılarda çalıştığı gibi çalışmıyor :S sebebi nedir?
Mehmet Duran 01 Temmuz Perşembe 2010 22:37 #9
Merhaba. Bu sorunun farkındayım. Aynı sorun Safari tarayıcısında da mevcut hatırladığım kadarıyla. Çok önceden ilgilenmiştim ama düzeltme fırsatım olmadı. Buradaki sorun kaydırma işleminin uygulanacağı elementlerin ("html,body") seçiminden kaynaklanıyor. Her tarayıcıya göre bu seçme işlemini kontrol etmek gerekiyor. Opera ve Safaride seçici olarak "html"'i seçmek yeterli oluyordu sanırım.
Ümit AKKAYA 21 Temmuz Çarşamba 2010 15:20 #10
scroll kodları Operada animasyonda hata çıkarıyor. Bunun içinde bir smooth scroll adında script yazılmış şahsen kendi sitemde kullanıyorum animasyonda sorun çıkarmıyor. Burdan o scripte göz atabilirsiniz. http://github.com/kswedberg/jquery-smooth-scroll
Turgay 25 Mart Cuma 2011 14:08 #11
Mehmet bey master.page ile jquery kullanamazmıyız?..
Mehmet Duran 08 Nisan Cuma 2011 22:55 #12
@Turgay, böyle bir soru çok mantıklı değil. Burada sıkıntının sebebi masterpage için yer alan sunucu taraflı kontrollerin clientid özellikleridir. Bu özelliği static yaparsan ve id'leri ile jquery selector'leri kullanılırsa veya jquery selector'leri yazılırken kontrollerin clientid özellikleri dikkate alınırsa sorun olmaz.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Hizmet amaçlı işler başarıya, kar amaçlı olanlar ise başarısızlığa yöneliktir.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009