Javascript 如何将浏览器位置应用于代码？

今天早些时候，我问了一个关于我的网页非常“神经质”的问题

我已在此处发布了我的网页的测试版本：

可以在此处查看代码笔：

该页面的想法是，您单击一个图像（在本例中是一个红色方块），结果显示一个隐藏的容器，该容器可以滚动显示，其中包含有关该图像的更多信息和图像

但是，当您单击其中一个正方形，并且显示容器和覆盖时，其他图像（正方形）将移动。有人向我建议，在我的显示功能中，我应该尝试跟踪打开此容器时浏览器所处的位置。然后在我的隐藏功能中，将浏览器返回到该位置

---

说实话，我对JavaScript一点也不擅长，所以我对于如何应用它几乎一无所知。我有更多的问题与此网页，我必须尽快解决它们，因此我再次问。有人能帮我吗？

据我所知，你的方块在移动，因为没有滚动类。如果我删除它，一切似乎都正常工作

试试这个：

$('img').on('click', show);
$('.overlay').on('click', hide);

function show(){   
   $('.scroll-container').eq($(this).parent().index()).addClass('show');
   $('.overlay').addClass('opacity');
}

function hide() {
   $('.scroll-container').removeClass('show');
   $('.overlay').removeClass('opacity');
}

---

在显示功能中，可以在显示文本之前检索滚动位置

scrollHeight = $(document).scrollTop();

在隐藏功能中，将滚动位置设置为以前获得的值

$(document).scrollTop( scrollHeight );

---

你能发布你的CSS吗？特别是“show”后面的CSS？这是“show”唯一的.CSS:.show{display:block；}我无法重现这个。当我点击红方块时，我看到一个叠加瞬间，没有跳跃。当我从覆盖层中点击时，它就消失了，把我留在我滚动到的页面上的任何位置。我正在使用Chrome 45。我刚刚测试了它，它的工作原理非常棒，因为它可以将其他图像保留在适当的位置，这非常棒！我现在注意到的唯一一件事是背景与容器一起滚动，这是它以前没有做过的，为了实现这一点，您做了哪些更改，它可以撤消吗？因为您的示例代码只有白色背景，我没有注意到。你可以使用你的背景样式，有css选项来保持背景固定，而不是滚动页面。应用它正是我想要的。现在我要寻找的唯一一件事，和denodster的答案一样，就是它如何做到这一点，同时保持背景中的红色图像不变。当滚动容器处于活动状态时，只有滚动容器应该滚动，而不是滚动容器的背景。将“滚动容器”放在div中，为div指定一个溢出属性hidden，然后为滚动容器指定一个溢出属性scroll y

$(document).scrollTop( scrollHeight );