javascript - 3 个垂直对齐的 div 之间的 ScrollTop 从 MID 到 BOT 不起作用，从 BOT 到 MID 出现故障

Question

更新: 我已经尝试删除一些元素的视口(viewport)大小，并删除一些功能，但我仍然遇到 5 个步骤中描述的相同行为，因此仍在寻找任何建议。 Latest fiddle iteration

我不知道为什么会这样。我在彼此之上有 3 个 div 和一个固定的导航。我正在使用 scrollTop: $("#targetDIV").offset().top - 100 到达三个 div 中的每一个。 scrollTop 从三个 .click() 函数之一调用；每个按钮一个。

您应该能够通过以下步骤模拟我在标题中描述的问题:

JSFiddle here

1. 点击“Mid DIV”按钮，您将被带到带有“Content of mid div”的中间 div
2. 现在点击“Last DIV”按钮，应该什么都不会发生
3. 刷新页面
4. 点击“Last DIV”按钮，您将被带到带有“Last div content”的最后一个 div
5. 现在点击“Mid DIV”按钮，它不再是中间的 div，而是直接转到顶部的 div，显示“这是顶层”

从顶部的 div，我可以完全进入 MID 和 BOT。

如果你能告诉我我错过了什么，我将不胜感激， 或者什么可能导致这种奇怪的行为。

Answer 1

当 info_overlay 滚动时，其子项的 offset().top 发生变化。

另一种方法是在滚动之前保存其所有子项的 offset().top，然后使用保存的值进行动画处理。

此外，由于 child 的 ID 与“btn”类名相关，您可以编写一个点击处理程序而不是三个:

$('.inf_con_block').each(function() {
  $(this).data('offset', $(this).offset().top - 100);
});

$('.inav_btn').click(function() {
  var d = '#con_'+$(this).attr('class').split('btn_')[1];
  $('#info_overlay').animate({
    scrollTop: $(d).data('offset')
  }, 1000);
});

Working Fiddle #1

---

更新

这实际上可以更简单地完成。只需添加 info_overlay 的 scrollTop，这将“偏移”其子项的 offset().top:

$('.inav_btn').click(function() {
  var d = '#con_'+$(this).attr('class').split('btn_')[1];
  $('#info_overlay').animate({
    scrollTop: ($(d).offset().top - 100) + $('#info_overlay').scrollTop()
  }, 1000);
});

Working Fiddle #2