Javascript 隐藏内容时如何避免位置跳转？

我一直在现场工作， 在此处，单击“小地图”可展开下面的较大地图

但是，当您在大地图下方滚动并单击底部的按钮关闭地图时，内容会跳转到另一个位置

我想知道是否有可能最大限度地减少关闭按钮下方内容的跳跃

我的推理：用户正在查看关闭按钮下方的内容，因此最好不要移动该内容

---

该站点是基于角度的，但问题并不特定于角度。同样的功能也可以通过jQuery实现。

假设

.map

是您的大地图容器，

.close

是关闭地图的按钮：

$('.close').click(function(){
     var sctop = $(window).scrollTop();
     var maptop = $('.map').offset().top;
     dif = maptop - sctop;
     if(dif <= 0) 
          $(window).scrollTop($(window).scrollTop()+dif-100);
    $('.map').hide();
});

以下是演示：

---

另一个演示：

不是内容在跳跃，而是当你隐藏元素时，它占用的空间关闭了

你可以尝试使用

$("#someID").css("visibility", "hidden");

与

这应该可以满足您的要求，但会在页面中留下空白

也许当你关闭地图时，你可以将页面向下滚动，与它在可见时所占的距离相同，以取消明显的内容跳转。但不确定它是否能达到预期效果

希望这有帮助，

---

蒂姆

我不明白你想做什么。我试着在你的页面中显示和隐藏地图，结果看起来不错。当你隐藏一个大的物体时，下面的物品显然会向上移动——如果不是，那么隐藏它有什么意义？@nnnn我已经添加了我的推理。我希望通过移动用户正在查看的内容来避免混淆用户。看起来@AshkanMobayenKhiabani提供了我在回答中描述的选项。谢谢，我将测试它。@DmitriZaitsev它有错误。我正在创建演示，我将更正答案并编辑答案。@DmitriZaitsev现在您可以查看演示；）

$("#someID").css("visibility", "hidden");

#someID {
    display: block; 
}