更新:我曾尝试删除某些元素的视口大小,并删除某些功能,但是我仍然遇到5个步骤中所述的相同行为,因此仍在寻找任何建议。
Latest fiddle iteration

我不知道为什么会这样。我彼此之间有3个div,并且有一个固定的导航。我正在使用scrollTop: $("# targetDIV ").offset().top - 100进入三个div中的每个div。 scrollTop是从三个.click()函数之一调用的;每个按钮一个。

通过执行以下步骤,您应该可以模拟标题中描述的问题:

JSFiddle here


点击“中级DIV”按钮,然后转到“ div中级内容”进入中级div
现在点击“ Last DIV”按钮,什么也不会发生
刷新页面
点击“上一个DIV”按钮,您将被带到带有“上一个div内容”的最后一个div
现在单击“中级DIV”按钮,而不是中间div,它会直接转到顶部div,并显示“这是顶层”


从最高级的div可以完全了解MID和BOT。

如果您能告诉我我想念的是什么,我将不胜感激,
或可能导致这种奇怪行为的原因。

最佳答案

滚动info_overlay时,其子级offset().top会更改。

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

另外,由于子代的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

更新资料

实际上,这可以更简单地完成。只需添加scrollTopinfo_overlay,它将“抵消”其子级的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

10-05 20:49
查看更多