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

Question

今天早些时候我问了一个关于我的网页非常 'jumpy'.

的问题

我在这里发布了我的网页的测试版本：http://armandbakx.nl/

代码笔可以在这里查看：http://codepen.io/anon/pen/GpmQoY

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

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

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

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

但是，当您单击其中一个方块时，容器和叠加显示，其他图像（方块）移动。有人向我建议，在我的 show 功能中，我应该尝试跟踪打开此容器时我的浏览器所处的位置。然后在我的隐藏功能中，return 浏览器到那个位置。

说实话，我根本不擅长 JavaScript，所以我对如何应用它一无所知。我在这个网页上遇到了更多问题，我必须快速修复它们，因此我再次询问。有人可以帮我解决这个问题吗？

Answer 1

据我所知，由于 .no-scroll class，您的方块正在四处移动。如果我删除它，一切似乎都正常工作。

试试这个：

$('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');
}

Answer 2

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

scrollHeight = $(document).scrollTop();

在您的隐藏函数中，将滚动位置设置为您之前获得的值。

$(document).scrollTop( scrollHeight );

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

How do I apply a browser-position to my code?

javascript

css

position