SON DAKİKA

Techofather.com – Best News Website

jQuery ile Kaydırma Efekti Yapmak!

jQuery ile Kaydırma Efekti Yapmak!
Bu haber 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)

jQuery ile Kaydırma Efekti Yapmak!
jQuery ile Kaydırma Efekti Yapmak!

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.

HABER HAKKINDA GÖRÜŞ BELİRT
YASAL UYARI! Suç teşkil edecek, yasadışı, tehditkar, rahatsız edici, hakaret ve küfür içeren, aşağılayıcı, küçük düşürücü, kaba, pornografik, ahlaka aykırı, kişilik haklarına zarar verici ya da benzeri niteliklerde içeriklerden doğan her türlü mali, hukuki, cezai, idari sorumluluk içeriği gönderen kişiye aittir.
POPÜLER FOTO GALERİLER
SON DAKİKA HABERLERİ
İLGİLİ HABERLER
SON DAKİKA