jquery - Jquery ScrollTop アニメーションの問題

Question

「上に移動」ボタンと「下に移動」ボタンを使用して、ウィンドウを次または前のセクション (div) にスクロールする単一ページを作成しようとしています。私が使用する方法は簡単です。たとえば、特別な ID を持つ 5 つの要素があります。jquery を使用して「pos」という名前の配列を作成し、すべての要素の位置を保持します。「上に移動」ボタンと「下に移動」ボタンをクリックしてこの配列をチェックし、値が低いまたは高い位置が含まれている場合、ウィンドウがスクロールします。

私は jfiddle を作成したので、ここでこの例を確認できます - http://jsfiddle.net/YbqAB/

jfiddle サイトでは機能しますが、私のページでは、$(window).scrollTop() の値が現在の位置と等しい場合、次の位置に存在する場合でも、「下に移動」ボタンはウィンドウをスクロールしません。この問題は常に発生するわけではありません。ページを何度も再表示 (CTRL + F5) すると、この問題が表示される場合と表示されない場合があります。

たとえば、位置が 0px、300px、500px、800px の 4 つの div がある場合、「下に移動」ボタンをクリックすると、ウィンドウは 300px の div に正常にスクロールします。しかし、もう一度「下に移動」ボタンをクリックして、500px の位置で次の div に移動すると、何も起こりません。マウスホイールでウィンドウをスクロールすると、数ピクセル下に移動すると、「下に移動」ボタンが再び機能し、ウィンドウが 500px の div にスクロールされます。

私は何を間違えましたか？あるいは、もっと簡単な解決策を知っている人もいるかもしれません。ありがとう。

HTML:

<div id="buttons">
    <div id="top-button"> up </div>
    <div id="bottom-button"> down </div>
</div>

<div id="position1"> First block </div>
<div id="position2"> Second block </div>
<div id="position3"> Third block </div>
<div id="position4"> Fourth block </div>
<div id="position5"> Fifth block </div>

CSS:

#buttons{
    position: fixed;
    right: 10px;
    top: 50%;
}

#top-button,
#bottom-button{
    width: 40px;
    height: 40px;
    background: orange;
    margin-bottom: 10px;
    font-size: 11px;
    text-align: center;
    line-height: 40px;
    color: yellow;
}

#position1,
#position2,
#position3,
#position4,
#position5{
    width: 100%;
    height: 400px;
    color: white;
    text-align: center;
    background: green;
    border-bottom: 5px solid yellow;
    padding-top: 20px;
}

Jクエリ:

var pos = [ 
    0,
    $("#position2").offset().top, 
    $("#position3").offset().top, 
    $("#position4").offset().top,
    $("#position5").offset().top
];

var $root = $('html, body');
var current;

$("#buttons #top-button").click(function () {
    $.each(pos, function(i,v){
        if( v < $(window).scrollTop() ){
            current = v;
        }
    });
    $root.stop(true,true).animate({scrollTop:current},500);         
});

$("#buttons #bottom-button").click(function () {
    $.each( pos, function(i,v){
        if( $(window).scrollTop() < v  ){
            $root.stop( true,true ).animate( {scrollTop: v}, 500);
            return false;
        }
    });         
});