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

in utopian-io •  7 years ago  (edited)

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

utopian-io utopian utopianio jquery
7 years ago by

Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

  • Disagreement on rewards
  • Fraud or plagiarism
  • Hate speech or trolling
  • Miscategorized content or spam

Submit
$0.00
    2 votes
    1
    Authors get paid when people like you upvote their post.
    If you enjoyed what you read here, create your account today and start earning FREE STEEM!
    Sort Order:  
  • Trending
    • [-]
      ·  7 years ago 

    Your contribution cannot be approved because the contribution category you have chosen requires your post to be in English. See the Utopian Rules.

    You can contact us on Discord.
    [utopian-moderator]

    Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

    • Disagreement on rewards
    • Fraud or plagiarism
    • Hate speech or trolling
    • Miscategorized content or spam

    Submit
    $0.00