Question

我一直在网站https://hotel4meetings.firebaseapp.com/上工作，点击小地图会在下面展开更大的地图。

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

我想知道是否可以最小化关闭按钮下方的内容跳转？

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

该网站是基于Angular的，但问题并非针对Angular。例如，可以实现相同的功能。用jQuery。

Answer 1

假设.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();
});

动画：

$('.close').click(function(){
    $('.map').slideUp(300);
    var sctop = $(window).scrollTop() - $('.map').height();
 $('html, body').animate({scrollTop : sctop}, 300);

});

以下是演示：https://jsfiddle.net/ym0ek6oq/1/

另一个演示：https://jsfiddle.net/ym0ek6oq/2/

Answer 2

并不是内容是跳跃的，当你隐藏元素时，它占用的空间会关闭。

您可以尝试使用

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

与

#someID {
    display: block; 
}

这应该按照您的要求进行，但会在页面中留下空白区域。

当您关闭地图时，可能会将页面向下滚动，同时取消内容的明显跳跃时可见的距离相同。不确定它是否会产生预期的效果。

希望这有帮助，添

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

2 个答案: