scrollTop动画的问题

Question

我有三个div，每个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> 

但是，即时通讯有问题的部分scrollTop动画。这里是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发生。

希望有人能帮助我！

编辑：

应该只有一个街区的内容可见在同一时间。例如，如果您单击红色然后蓝色，则红色的内容应该滑动，而蓝色显示。

Answer 1

JavaScript的异步性质导致您的问题;即 .slidUp（）函数。当这个事件被触发时，它触发一个异步事件，该事件对函数的其余部分是非阻塞的。因此，动画顶部将在特定时刻拍摄DOM的快照，而功能正在起作用。使用.show（）和.hide（）替换.slidUp（）和.slidDown（）来解决此问题，但这不能提供您所需的响应性。一个想法是捕获每个以前的内容div的偏移量，并在scrollTop函数中使用它。

Answer 2

编辑：

基于编辑，你需要在你的代码一些调整，其基于相应.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; 
} 

}); 

这里基于scrollposition并增加保证金scrolltop位置是在工作代码：https://jsfiddle.net/ss53ckyk/13/