scrollTopアニメーションの問題

Question

私には3つのdivがあり、それぞれには隠されたコンテンツがあります。 divをクリックすると、その内容が下にスライドして表示されます。同時に、scrollTopを使用して、クリックされたブロックの上部にブラウザをスクロールさせます。 HTMLは次のようになります。

<div class="blocks block1"></div> 
<div class="content block1_content"></div> 

<div class="blocks block2"></div> 
<div class="content block2_content"></div> 

<div class="blocks block3"></div> 
<div class="content block3_content"></div> 

ただし、スクロールトップアニメーションの一部に問題があります。ここでJSは次のとおりです。

$('.blocks').on("click", function() { 
    if (!$(this).hasClass('expanded')) { 
    collapseExpandedFunction(); 

    $('html, body').animate({ 
     scrollTop: $(this).offset().top 
    }, 500); 

    $(this).addClass('expanded'); 

    $(this).next().slideDown(); 
    } else if ($(this).hasClass('expanded')) { 
    collapseExpandedFunction(); 

    } 
}); 

collapseExpandedFunction = function() { 
    $('.blocks.expanded').removeClass('expanded'); 
    $('.content').slideUp(); 
}; 

私は簡単に問題を実証するjsfiddleをした：https://jsfiddle.net/ss53ckyk/3/

、について説明：

あなたが緑のブロックを切り替え開始し、赤または青を切り替える場合は、大丈夫だよー。緑色のコンテンツは非表示になり、赤色/青色は表示され、ブロックの上部にスクロールされます。

問題は、上から開始して下に移動する場合です。最初に赤色を切り替え、次に青色または緑色を切り替えると、ブラウザは正しくスクロールしません。

私が気に入っている別のものは、scrollTopアニメーションが完了した後にslideDownを行うことです。

誰かが私を助けてくれることを願っています。

EDIT：

だけ一度に表示内容1つのブロックがあるはずです。たとえば、赤を一度クリックしてから青をクリックすると、青が表示されている間に赤の内容が上にスライドします。

Answer 1

javascriptの非同期性が原因です。 .slidUp（）関数です。このイベントがトリガされると、非同期イベントが発生します。非同期イベントは、残りのファンクションに対して非ブロッキングです。したがって、animate topは、特定の瞬間にDOMのスナップショットを取得し、 .slidUp（）関数が動作しています。これを解決するには.slidUp（）と.slidDown（）を.show（）と.hide（）に置き換えますが、これは必要な応答性を提供しません。 1つの考えは、以前の各コンテンツdivのオフセットを取得し、scrollTop関数でそれを使用することです。

Answer 2

EDIT：

編集をもとに、あなたはscrollpositionに基づいscrolltop位置を計算し、対応する.content divの

$(document).ready(function() { 

    var addMargin = false; 

    $('.blocks').on("click", function() { 
    if (!$(this).hasClass('expanded')) {  
     collapseExpandedFunction(); 

     var doc = document.documentElement; 
     var ele = this;  
     var nextEle = $(ele).next(); 

     $(this).addClass('expanded');  

     var margin = 0; 
     var scrollTo = 0;  


    if($(ele).hasClass('expanded')) 
     { 
      if(addMargin) 
      margin = $(nextEle).css('height').replace('px',''); 
      scrollTo = $(ele).offset().top - margin;    
     }   

     if(doc.scrollTop != 0 && doc.scrollTop > scrollTo && addMargin) 
     { 
      console.log(margin); 
     scrollTo = scrollTo + 200; 
     } 

    $('html, body').animate({ 
     scrollTop: scrollTo 
     }, 500, function() 
     {   
     $(ele).next().slideDown(); 
     });  

    } else if ($(this).hasClass('expanded')) { 
     collapseExpandedFunction(); 
    }  

    }); 

    collapseExpandedFunction = function() 
    { 
    $('.blocks.expanded').removeClass('expanded'); 
    $('.content').slideUp(); 
    addMargin = false; 
    }; 

    window.onscroll = function (e) { 
    addMargin = true; 
} 

}); 

に基づいてマージンを追加すると、ここにありますあなたのコード内のいくつかの調整を行う必要があります作業コード：https://jsfiddle.net/ss53ckyk/13/