javascript - scrollTop 动画的问题

Question

我有三个 div，每个都有一些隐藏内容。当你点击一个div时，它的内容是通过向下滑动来显示的。同时，我使用 scrollTop 使浏览器滚动到被单击的 block 的顶部。 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/

解释:

如果您开始切换绿色 block ，然后切换红色或蓝色 block ，一切都很好。绿色内容被隐藏，而红色/蓝色内容显示并滚动到 block 的顶部。

问题是如果您从顶部开始向下移动。如果您先切换红色，然后切换蓝色或绿色，浏览器将无法正确向下滚动。

我想要的另一件事是让 slideDown 在 scrollTop 动画完成后发生。

希望有人能帮帮我!

编辑:

一次应该只有一个 block 内容可见。例如，如果您单击一次红色，然后单击蓝色，则红色的内容应向上滑动，同时显示蓝色。

Answer 1

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