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的异步特性导致了您的问题； function. 即函数。 触发此事件后，它将触发一个异步事件，该事件不会阻塞该函数的其余部分。 function is actioning. 因此，当函数起作用时，动画顶部将在特定时间拍摄DOM的快照。 用.show（）和.hide（）替换.slidUp（）和.slidDown（）可以解决此问题，但这不能提供您所需的响应能力。 一种想法是捕获每个先前内容div的偏移量，并在scrollTop函数中使用它。

Answer 2

编辑：

基于编辑，你需要在你的代码，其计算一些调整scrolltop基于位置scrollposition基于相应的，增加利润率.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/