JQuery ile otomatik kaydırma nasıl gerçekleştirilir?

What Will I Learn?
Automatically scroll down with Jquery?

Requirements

Basic knowledge about HTML.
Basic knowledge about CSS.
Basic knowledge about Jquery.

Ne Öğreneceğim?

JQuery ile otomatik kaydırma nasıl gerçekleştiriliğini gösterip kodlarını vereceğim

Gereksinimler

• HTML ile ilgili temel bilgiler.
• CSS hakkında temel bilgiler.
• JQuery hakkında temel bilgi.

zorluk

kolay temel bilgiler

Otomatik kaydırma, bir web sayfasının önceden belirlenmiş ve yapılandırılabilir bir hızda otomatik olarak aşağı kaymasına neden olan bir özelliktir. Bu, uzun makale, mesaj veya diğer bazı uzun web içeriği içeren web siteleri için oldukça yararlı bir özelliktir. Bu özellik, kullanıcıları fare veya klavye kullanarak sayfayı kaydırmak zorunda kalmamakta. Bu yazıda, jQuery'yi kullanarak herhangi bir web sitesi için otomatik kaydırmayı uygulamak için birkaç yol izleyelim.

HTML Markup

Her şeyden önce, bu özelliğin kolayca yapılandırılmasını istiyoruz, böylece kullanıcı ;

• Otomatik kaydırmayı başlatma ve durdurma
• Oranı ayarlama
• Ekranın otomatik olarak ne kadar piksel kaydırılması gerektiğini ayarlama

Bu nedenle zaman ve piksel değeri(pixel value) elde etmek için 2 girişe (input boxes) ihtiyacımız vardır:

Time (in Seconds) :

<input type="text" id="txtTime" value="3" />

Pixel:

<input type="text" id="txtPixel" Value="100"/>

Varsayılan olarak, süre 3 saniyeye ayarlanır ve piksel değeri 100 piksele ayarlanır.

Kaydırmayı başlatmak ve durdurmak için 2 HTML button da ihtiyacımız olacak:

<input type="button" id="btnStart" value="Start Scrolling" />
<input type="button" id="btnStop" value="Stop Scrolling" />

Sonunda, yalnızca 'kaydırma çubuğu'(stop scrolling) tıklandığında görünür olacak ve başka bir button isteyeceğiz:

<input type="button" id="btnStartHidden" style="display:none;" value="Start Scrolling" />

Varsayılan olarak, bu düğme(button) gizlenecektir. 'stop scrolling' seçildiğinde, bu düğme sayfanın sol üst köşesinde görünecektir. Bu, kullanıcının kaydırmayı yeniden başlatmak istediğinde, burayı tıklayarak kolayca bunu yapabilmesi için gereklidir. stop scrolling düğmesi web sayfasının içeriği ile birlikte kaydırılır, böylece kullanıcı herhangi bir zamanda sayfanın en üstüne geriye dönmeden kaydırmayı durdurabilir.

HTML şu şekilde görünecektir:

CSS

Aşağıdaki CSS sınıfları, HTML sayfasındaki unsurları stil etmek ve konumlandırmak için kullanılır. Bu CSS sınıfları düğmeleri stilize eder ve konumlarını belirler. Ayrıca sayfanın sol üst köşesine yerleştirmek için gizli düğme için tanımlanmış bir CSS sınıfı vardır:

input[type="text"] { 
    width:50px; 
}
#btnStop {
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: red;
}
#btnStartHidden {
    position: absolute;
    left: 0px;
    top: 0px;
}
.button {
    background-color: #4CAF50; /* Green */   
    border: none;
    color: white;
    padding: 10px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

jQuery Kodu

Bu işlevselliği uygulamak için JavaScript'in setInterval () ve clearInterval () işlevlerini kullanmamız gerekecektir . SetInterval () yöntemi bir işlevi çağırır veya bir ifadeyi belirtilen aralıklarla (milisaniye cinsinden) değerlendirir. SetInterval () metodu işlevini çağıran devam edecektir ve clearInterval () olarak adlandırılan pencereyi kapatacaktır. clearInterval () metodu setInterval () yöntemiyle belirlenen bir zamanlayıcıyı temizler.

JQuery çözümünün ana hatları aşağıdadır:

• Genel değişkeni scrollInterval olarak tanımlayın. Bu setInterval () ve clearInterval () zamanlayıcıyı işlemekten sorumlu olacaktır .

• Zaman değerini şimdi alın, çünkü kodun farklı bölümlerinde bir kere daha almak ve onu genel bir değişkende saklamanız daha iyi kullanılır. SetInterval, zamanlayıcı değerini milisaniye cinsinden aldığından milisaniyelik değeri elde etmek için saniye sayısını 1000 ile çarpmak gerekecek:

var scrollInterval = false;
var iSeconds = $('#txtTime').val();
iSeconds = parseInt(iSeconds) * 1000;

AutomaticScroll adlı bir işlev oluşturun. Bu sayfa kaydırır ve 'Stop Scrolling' düğmesinin konumunu sayfa kaydırma konumuyla aynı hizada olacak şekilde ayarlar. Bu işlev aynı zamanda piksellerin giriş değerini okur ve kullanıcı tercihine göre doğru kaydırma konumunu elde etmek için genel bir değişkende tanımlanan süreyi kullanır. Ayrıca, sayfanın sonuna erişildiğinde kaydırmayı durdurmak lada sorumludur. Kaydırma işlevini duracak şekilde ayarlamazsak, setInterval gerekli olmayan bu işlevi çağırmaya devam edecektir.

function AutomaticScroll() {Â Â Â 
    var nScrollTop = $(window).scrollTop();Â Â Â 
    if (parseInt(nScrollTop + $(window).height()) == $(document).height()) {
        clearInterval(scrollInterval);
        return;
    }Â Â Â 
    var nPixel = $('#txtPixel').val();
    nScrollTop = nScrollTop + parseInt(nPixel);
    $('html, body').animate({
        scrollTop: nScrollTop
    }, 1000);
    $('#btnStop').animate({
        "top": nScrollTop + "px"
    }, 1500);Â 
}

• Başlat Kaydırma düğmesini tıklatın, setInterval () kullanarak AutomaticScroll işlevini çağırın . Burada scrollInterval değişkeni, setInterval () referansını tutar. Kaydırmayı durdurmak istersek, bu referansı clearInterval () işlevine göndeririz:

$('#btnStart').click(function() {
    scrollInterval = setInterval(AutomaticScroll, iSeconds);Â 
});

Kaydırmayı Durdur düğmesini ( Stop Scrolling button ) tıklattığınızda, setInterval () değişkeninin referansı clearInterval () kullanılarak temizlenir. Bu noktada, kullanıcının istediği zaman tekrar kaydırmaya başlayabilmesi için gizli düğme görünecektir. Gizli düğme, sayfanın sol üst köşesinde görünür olacaktır. Bunun gibi:

$('#btnStop').click(function() {
    clearInterval(scrollInterval);
    var nScrollTop = $(window).scrollTop();
    if (nScrollTop != 0) {
        $('#btnStartHidden').show(500);
        $('#btnStartHidden').animate({
            "top": nScrollTop + "px"
        }, 500);
    }Â 
});

• Gizli düğme seçildiğinde tekrar kaydırmayı başlatmak için AutomaticScroll işlevini setInterval ile çağırırız. Bu noktada, bu düğmeyi yine bazı hareketlerle gizleyeceğiz:

$('#btnStartHidden').click(function() {
    scrollInterval = setInterval(AutomaticScroll, iSeconds);
    $(this).hide(1000);Â 
});

• Ayrıca kaydırma kullanıcı tarafından durdurulduğunda ve tarayıcı'nın kaydırma çubuğunu kullanarak kullanıcı sayfanın üst kısmına geçtiğinde, durma kaydırma düğmesinin konumunu da ele almamız gerekir. Dur kaydırma düğmesinin konumu mutlak olduğu için sayfanın üst kısmına da taşımamız gerekir. Bu nedenle, pencere nesnesine bir kaydırma olayı ekleyin ve scrollTop'u kullanarak kaydırma konumunu kontrol edin . ScrollTop eşleşen öğeler kümesindeki ilk öğe için kaydırma çubuğunun geçerli dikey konumunu okur veya eşleşen öğelerin her biri için kaydırma çubuğunun dikey konumunu ayarlar.

Örnek olarak, scrollTop değeri 0 sayfanın üstü olur. Dolayısıyla, gizli düğmeyi gizleriz ve "sağ üst köşedeki kaydırma" düğmesinin konumunu ayarlarız; böylece sağ üst köşede gösterilir:

$(window).scroll(function() {
    var nScrollTop = $(window).scrollTop();
    if (parseInt(nScrollTop) == 0) {
        $('#btnStartHidden').hide();
        $('#btnStop').animate({
            "top": nScrollTop + "px"
        }, 1500);
    }Â 
});

Son olarak, tam jQuery kodu aşağıdadır:

$(document).ready(function() {Â 
    var scrollInterval = false;Â 
    var iSeconds = $('#txtTime').val();Â 
    iSeconds = parseInt(iSeconds) * 1000;Â 
    function AutomaticScroll() {Â Â Â 
        var nScrollTop = $(window).scrollTop();Â Â Â 
        if (parseInt(nScrollTop + $(window).height()) == $(document).height()) {
            clearInterval(scrollInterval);
            return;
        }Â Â Â 
        var nPixel = $('#txtPixel').val();
        nScrollTop = nScrollTop + parseInt(nPixel);
        $('html, body').animate({
            scrollTop: nScrollTop
        }, 1000);
        $('#btnStop').animate({
            "top": nScrollTop + "px"
        }, 1500);Â 
    }Â 
    $(window).scroll(function() {
        var nScrollTop = $(window).scrollTop();
        if (parseInt(nScrollTop) == 0) {
            $('#btnStartHidden').hide();
            $('#btnStop').animate({
                "top": nScrollTop + "px"
            }, 1500);
        }Â 
    });Â 
    $('#btnStart').click(function() {
        scrollInterval = setInterval(AutomaticScroll, iSeconds);Â 
    });Â 
    $('#btnStartHidden').click(function() {
        scrollInterval = setInterval(AutomaticScroll, iSeconds);
        $(this).hide(1000);Â 
    });Â 
    $('#btnStop').click(function() {
        clearInterval(scrollInterval);
        var nScrollTop = $(window).scrollTop();
        if (nScrollTop != 0) {
            $('#btnStartHidden').show(500);
            $('#btnStartHidden').animate({
                "top": nScrollTop + "px"
            }, 500);
        }Â 
    });
});

---

Posted on Utopian.io - Rewarding Open Source Contributors

---