jQuery scrollTop problems

Question

私は、見出しをつけてクイズのWeb apを書いています。各質問のdivとdivはすべて兄弟ですから、私が使用している関数にcurrent.nextSiblingとcurrent.previousSiblingを渡してページをたどります。

今、私は 'animate'と 'scrollTop'メソッドを使ってjQueryで滑らかなスクロールを作成しようとしていますが、動作しません。誰にもこれに関する考えはありますか？ここで添付のコード、ここでいじるするためのリンク：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

あなたは、通常のHTML DOM要素にjQueryの.offset()を使用しようとしてきました。 フィドルのこの更新されたバージョンを参照してください：私は何 https://jsfiddle.net/fjydnc9m/12/

はjQueryを介して、前と次の兄弟を取得し、その上.offset()を使用することです。

currentが最初または最後のラッパーであるか、または奇妙なスクロールが行われるケースについても考慮する必要があります。これを行うには、スクロールする前にprevSiblingまたはnextSiblingの長さが> 0であるかどうかをチェックします。

Answer 2

current変数を記録すると、current変数に割り当てられた#text兄弟があることがわかります。このフィドル

チェックアウト：

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

あなたは、私が scrollTop機能でそれを使用して current変数 二回先行が割り当てられていることがわかります

：私は「

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); 

注意m現在の変数を記録します。 current割り当ての1つを削除して、ログが何を表示しているのかを確認します（何が起こっているかがわかります）。