Question

今天早些时候，我问了一个关于我的网页非常“疯狂”的问题。

我在这里发布了我的网页测试版：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函数中，我应该尝试跟踪我的浏览器在打开这个容器时所处的位置。然后在我的隐藏功能中，将浏览器返回到该位置。

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

Answer 1

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

试试这个：

$('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

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

scrollHeight = $(document).scrollTop();

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

$(document).scrollTop( scrollHeight );

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

2 个答案: