22 Ocak 2013 Salı

Javascript ile tarayıcı penceresinde kaydırma işlemleri

   Bu makalemde onscroll fonksiyonunu yakından tanıyacağız. Javascript fonksiyonlarından birisi olan onscroll tarayıcımızın sağ tarafındaki kaydırma çubuğunu aşağı veya yukarı doğru hareket ettirdiğimizde meydana gelen bir olaydır.(event) Gelin basit bir örnek üzerinden bu fonksiyonun ne iş yaptığını anlamaya çalışalım.


 <script>
      window.onscroll = function () {
          alert("Kaydırma çubuğunuzu kaydırdınız.");
      }
  </script> 

Yukarıdaki kodu sayfanıza yapıştırıp tarayıcının sağ tarafındaki kaydırma çubuğunu hareket ettirdiğinizde "Kaydırma çubuğunu kaydırdınız." şeklinde bir mesaj çıkacaktır. (Bu arada ekranınızın sağ tarafında kaydırma çubuğunun gözükebilmesi için dokümanın yüksekliğinin ekran yüksekliğinden fazla olması gerektiğini unutmayın.)

 <script>
      function yukariGit() {
          window.scrollTo(0, 0);
      }
        </script> 



<a href="javascript:yukariGit();">Yukayı git</a>

Yukarıdaki kodlara bir göz atalım. Bazen web sayfalarında dokümanın aşağı kısımlarında yukarı, yukarı git şeklinde yazılar veya yukarı ok işareti görürüz. Tıkladığımızda da dokümanın en üst tarafına geliriz. Yukarıdaki kod da benzer bir işi yapıyor. scrollTo fonksiyonuna x=genişlik, y=yükseklik olmak üzere farklı değerler verebilirsiniz. Böylece ekranın istediğiniz yerine gidebilirsiniz.