Merhaba, 2019 yılındaki ilk paylaşımımı Javascript ile AutoScroll Uygulaması yaparak başlayacağım.

AutoScroll’un ne olduğunu bilmeyenler için Site üzerinde herhangi bir linke tıkladığımızda bizim sitemiz üzerinde istediğimiz bir yere otomatik olarak götürmesini istiyorsak bu uygulama tam olarak bize göre. Şimdi uygulamamızı yapmaya başlayalım.

Bu işin HTML kısmı ile uğraşmadan sizlere hazırlamış olduğum tasarımdan bir görüntü göstermek gerekirse

Burada 4 adet link oluşturdum ve bunların onclick özelliğini return false olarak eşitliyoruz ve onmousedown özelliğini ise autoScroll(id) olarak eşitliyoruz. Daha sonra 4 adet div oluşturuyoruz ve bu divlerin id özelliğini div1, div2, div3, div4 olarak eşitliyoruz ve daha demin bahsettiğim autoScroll(‘div1’) olacak şekilde ayarlıyoruz.

Javascript Kodlarımız

var scrollY = 0;

var distance = 40;

var speed = 24;

function autoScroll(eID){

var currentY = window.pageYOffset;

var targetY = document.getElementById(eID).offsetTop;

var bodyHeight = document.body.offsetHeight;

var yPos = currentY + window.innerHeight;

var animator = setTimeout(‘autoScroll(\”+eID+’\’)’,speed);

if( yPos > bodyHeight ){

clearTimeout(animator);

}else{

if( currentY < targetY – distance ){

scrollY = currentY + distance;

window.scroll(0,scrollY);

}else{

clearTimeout(animator);

}

}

}

şeklinde olacaktır. Şimdi bu AutoScroll uygulamasının nasıl çalıştığını anlatmanın zamanı geldi.

var scrollY = 0;

var distance = 40;

var speed = 24;

Oluşturduğumuz bu 3 değişken bize belirli ayarlamaları yapmamız için gereklidir bu ayarlar. scrollY değişkeni başlangıçta alabileceğimiz bir referans değeri olarak düşünebiliriz. distance değişkeni sayfa aşağı kayarken kaç piksel kaç piksel aşağı ineceğini belirten bir değer taşıyor. speed değişkeni ise bu işlemin kaç milisaniyede yapabileceğimizi gösteriyor

function autoScroll(eID){

}

Buradaki eID parametresi ilerleme yapacağımız div’in id özelliğini temsil ediyor.

Şimdi bu fonksiyonun nasıl çalıştığını görelim

var currentY = window.pageYOffset;

Bu kod şu anda yatay düzlemde nerede olduğumuzun değerini tutuyor.

var targetY = document.getElementById(eID).offsetTop;

Bu kod ise fonksiyona gönderilen id’nin en üst kısmının piksel olarak değerini tutuyor.

var bodyHeight = document.body.offsetHeight;

Burada önemli offsetHeight kodu. Bu kod body elementinin yüksekliğine padding, margin ve border özelliklerini de ekleyerek bize bir değer veriyor.

var yPos = currentY + window.innerHeight;

Bu kodu aslında Javascript ile Scroll İşlemleri yazımda bahsetmiştim buradan inceleyerek ne işe yarayacaklarını görebilirsiniz.

var animator = setTimeout(‘autoScroll(\”+eID+’\’)’,speed);

Bu kısım ise linke tıkladığımız zaman bize aşağı kaydırma efektini vericek ve bunun ne kadar süre harcıyacaklarını belirlediğimiz kısım.

if ( yPos > bodyHeight){

clearTimeout(animator);

}

bu kod yukarıda aldığımız değerin body değerimizin yükseklik değerinden daha büyükse animasyon efektini durdurmasını sağlıyor.

else{

if( currentY < targetY – distance ){

scrollY = currentY + distance;

window.scroll(0,scrollY);

}else{

clearTimeout(animator);

}

}

Bu kısım ise eğer şu anki yüksekliğimiz gideceğimiz yükseklikten kaç piksel kaç piksel aşağı ineceğimizi belirttiğimiz değerden düşürdüğümüzde. Şu anki yüksekliğimiz daha küçük kalıyorsa şu işlemler yapılacak

scrollY = currentY + distance;

scrollY değişkeninin değerini şu anki yüksekliğimiz ve distance değişkenin de değerini ekleyerek yeni bir scrollY değişkenine aktarıyoruz.

window.scroll(0,scrollY);

Bu kod ise aşağı kaydırma işlemini yapan asıl koddur.

else{

clearTimeout(animator);

}

Eğer yukarıdaki koşul sağlanmıyorsa animasyon işlemini durdurmasını söylüyoruz böylece daha fazla aşağı kaydırmasını durdurmasını sağlıyoruz.


Yapmış olduğumuz uygulama burada bitiyor fakat şu konuda sizi uyarmam gerekiyor bu kodlar sadece aşağı kaydırma işlemini halletmemizi sağlar eğer aşağıdan yukarıya kaydırmaya çalışırsanız bu işlem çalışmayacaktır bunun için belirli işlemler yapmanız gereklidir. Bu kısmı da sizlere bırakıyorum. Bunu yapmak için biraz daha yardıma ihtiyacınız olacaktır bu yüzden bir önceki yazım olan Javascript ile Scroll İşlemleri yazımı incelememi öneririm.