jQuery ile Kaydırma Efekti Yapmak!

05 Ocak 2021 - 16:17 'de eklendi ve kez görüntülendi.

Dinamik web sayfaları oluştururken en iyi kullanıcı deneyimi göz önünde tutulur. Bunlardan biride yazdığınız yazının içindekiler bölümünü oluşturmaktır. jQuery ile kaydırma efekti yapmak için bu içerik size rehberlik yapıcaktır. Böylece ziyaretçi yazıda istediği yeri rahatlıkla bulabilir ve yazıda kolayca gezinebilir. Bu yazımızda jQuery ile nasıl kaydırma efekti nasıl yapılır onu öğreneceğiz.

Ayrıca Okuyun: WordPress Şifre Sıfırlama! (2 Kolay Yöntem)

Gerekli Dökümanın Hazırlanması

İlk olarak index.html sayfamızı oluşturarak kodlamamıza başlayalım.

<!DOCTYPE HTML>
<html>
<head>
<title>Kaydırma Efekti</title>
<meta charset="UTF-8"/>
</head>
<body>

</body>
</html>

İşte HTML5 iskeletimizi oluşturduk. Hadi diğer adıma geçelim!

jQuery Kütüphanesinin Sayfaya Dahil Edilmesi

jQuery‘nin kendi sitesinden aldığımız linki sayfamıza dahil edelim.

<!DOCTYPE HTML>
<html>
<head>
<title>Kaydırma Efekti</title>
<meta charset="UTF-8"/>
</head>
<body>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</body>
</html>

Güzel. Artık jQuery’ye erişimimiz var. Şimdi birbirine kaydırma efekti ekleyeceğimiz iki tane div elementi oluşturup kaydıracağımız div’e id verelim. Daha sonra kaydırma kodlarını kopyalayıp dosyamızı dahil edelim. Son olarak nereden nereye kaydırma yapacağımızı belirlemek kaldı. Ben burada bir buton oluşturdum ve basıldığında kaydırma fonksiyonumuzun çalışacağı onclick değeri atadım.

Gerekli Kodların Eklenmesi

<!DOCTYPE HTML>
<html>
<head>
<title>Kaydırma Efekti</title>
<meta charset="UTF-8"/>
</head>

<body>
<div class="ilkbolge" style="margin-top: 200px;">
<input type="button" onclick="smoothScroll(document.getElementById('icerik'))" value="Buraya Tıklayın!"/>
</div>

<div class="ikincibolge" style="width: 100%; height: 200px; background: black; margin-top: 600px;" id="icerik"></div>

<script>
window.smoothScroll = function (target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
}
while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container        if (target == scrollContainer) break;
targetY += target.offsetTop;
}
while (target = target.offsetParent);
scroll = function (c, a, b, i) {
i++;  if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function () {
scroll(c, a, b, i); }, 20); } // start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);}
</script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</body>
</html>

Sizin tek yapmanız gereken;

onclick=”smoothScroll(document.getElementById(‘icerik’))” buradaki icerik id’sini kendi id değerinizle değiştirmek olacaktır.

İşte bu kadar! Artık web sayfalarınızda gönül rahatlığıyla kullanabileceksiniz.