jQuery scrollTop sorunları

Question

Açılış başlığı ve ardından onu takip eden 10 soru içeren bir sınav web ap. Açılışın div'u ve her bir soruya ait div tüm kardeşler, bu yüzden kullandığım tüm fonksiyonlara current.nextSibling ve current.previousSibling'i geçerek sayfayı geçiyorum.

Şu anda 'animate' ve 'scrollTop' yöntemleri ile jQuery ile düzgün bir kaydırma oluşturmaya çalışıyorum, ancak çalışmıyor. Bunun hakkında herhangi bir fikri var mı? Burada ekli Kod, bağlantı burada keman: Sen normal bir HTML DOM öğesindeki jQuery .offset() kullanmaya çalışıyorum https://jsfiddle.net/fjydnc9m/1/

var main = function() { 
    var root = $('html, body'); 
    var current = document.getElementById("opening"); 


    $('.upButton').click(function() { 
     $('html, body').animate({ scrollTop:$(current.previousSibling).offset().top}, 2000); 
     current = current.previousSibling; 
    }); 


    $('.downButton').click(function() { 
     $('html, body').animate({ scrollTop: $(current.nextSibling).offset().top}, 2000); 
     current = current.nextSibling; 
    }); 



} 

$(document).ready(main); 

Answer 1

. keman bu güncellenmiş sürümünü bakınız: Yaptıklarımı https://jsfiddle.net/fjydnc9m/12/

jQuery ile prev ve sonraki kardeş almak ve bu konuda .offset() kullanmaktır.

Ayrıca, current'un ilk veya son sarıcı olduğu durumları da hesaba katacağınızı veya bazı tuhaf kaydırma işlemlerinin gerçekleşeceğini unutmayın. Kaydırma işleminden önce prevSibling veya nextSibling uzunluğunun> 0 olup olmadığını kontrol ederek bunu yapabilirsiniz.

Answer 2

current değişkenini günlüğe kaydederseniz, current değişkenine atanan bir #text kardeş olduğunu öğrenirsiniz. Bu keman

atın:

https://jsfiddle.net/fjydnc9m/13/

Sen scrollTop işlevinde bunu kullanmaya current değişken iki kez ÖNCE atanan görebilirsiniz

: Ben

var main = function() { 
var root = $('html, body'); 
var current = document.getElementById("opening"); 


$('.upButton').click(function() { 
    current = current.previousSibling; 
    current = current.previousSibling; 
    $('html, body').animate({ 
    scrollTop: $(current).offset().top 
    }, 2000); 
    console.log(current); 
}); 


$('.downButton').click(function() { 
    current = current.nextSibling; 
    current = current.nextSibling; 
    $('html, body').animate({ 
    scrollTop: $(current).offset().top 
    }, 2000); 
    console.log(current); 
    }); 
} 

$(document).ready(main); 

Not Geçerli değişkeni kaydetme. current atamalarından birini kaldırın ve günlüğün ne yaptığını görün (neler olup bittiğini göreceksiniz).