更新:我曾尝试删除某些元素的视口大小,并删除某些功能,但是我仍然遇到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
更新资料
实际上,这可以更简单地完成。只需添加
scrollTop
的info_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