jQuery öğeye kaydırma

Bu input elemanına sahibim:

<input type="text" class="textfield" value="" id="subject" name="subject">

Sonra diğer metin girişleri, metin alanları vb. gibi başka öğelerim var.

Kullanıcı #subject ile bu inputa tıkladığında, sayfa güzel bir animasyonla sayfanın son öğesine kaydırılmalıdır. Bu yukarıya değil aşağıya doğru bir kaydırma olmalıdır.

Sayfanın son öğesi #submit ile bir submit düğmesidir:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

Animasyon çok hızlı olmamalı ve akıcı olmalıdır.

En son jQuery sürümünü çalıştırıyorum. Bunu başarmak için herhangi bir eklenti yüklememeyi ve varsayılan jQuery özelliklerini kullanmayı tercih ediyorum.

Maistrenko Vitalii
Edited question 2017ösp18ös12 Eylül 2017 в 12:18
Programlama
javascript jquery
2011ööp49öö9 Temmuz 2011 в 9:49
23 görünümler
Çözüm

button` id'sine sahip bir düğmeniz olduğunu varsayarak bu örneği deneyin:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Kodu jQuery eklentisi olmadan bir öğeye sorunsuzca kaydırma makalesinden aldım. Ve aşağıdaki örnek üzerinde test ettim.


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    Click me
php_nub_qq
Edited answer 2018ösp48ös14 Temmuz 2018 в 2:48
Yorumlar (24)

jQuery .scrollTo(): Görünüm - Demo, API, Kaynak

Bu hafif eklentiyi sayfa/eleman kaydırmayı çok daha kolay hale getirmek için yazdım. Bir hedef öğe veya belirtilen değeri iletebileceğiniz esnektir. Belki de bu jQuery'nin bir sonraki resmi sürümünün bir parçası olabilir, ne düşünüyorsunuz?

Örnek Kullanım:

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

Seçenekler:

scrollTarget: İstenen kaydırma konumunu belirten bir öğe, dize veya sayı.

offsetTop: Kaydırma hedefinin üzerinde ek boşluk tanımlayan bir sayı.

süre: Animasyonun ne kadar süreceğini belirleyen bir dize veya sayı.

Gevşeme: Geçiş için hangi hafifletme fonksiyonunun kullanılacağını belirten bir dize.

tamamlandı: Animasyon tamamlandığında çağrılacak bir fonksiyon.

Alex78191
Edited answer 2017ööp37öö10 Mayıs 2017 в 10:37
Yorumlar (11)

Bu basit komut dosyasını kullanarak

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

URL'de bir hash etiketi bulunursa, scrollTo'nun ID'ye animasyon yapmasını sağlar. Hash etiketi bulunmazsa, komut dosyasını yoksay.

Warface
Edited answer 2017ööp34öö4 Kasım 2017 в 4:34
Yorumlar (0)