scrollTop 动画的问题

Question

我有三个 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() 函数。当此事件被触发时，它会触发一个异步事件，该事件对函数的其余部分是非阻塞的。因此，动画顶部将在 .slidUp() 函数运行时的特定时刻拍摄 DOM 的快照。用 .show() 和 .hide() 替换 .slidUp() 和 .slidDown() 来解决这个问题，但这并不能提供您需要的响应能力。一种想法是捕获每个先前内容 div 的偏移量并在 scrollTop 函数中使用它。

Answer 2

编辑：

根据编辑，您需要对代码进行一些调整，根据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/