如何将浏览器位置应用到代码中

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

本文关键字：代码 应用 位置 浏览器      更新时间：2023-09-26

今天早些时候我问了一个关于我的网页非常'跳跃'的问题。

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

可以在这里查看codependency: 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');
}

这个页面的想法是，你点击一个图像(在这个例子中是一个红色的正方形)，结果显示一个隐藏的容器，可以滚动，包含更多的信息和图像关于这个图像。

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

说实话，我不擅长JavaScript在所有，所以我几乎无能为力，我应该如何应用它。我有更多的问题与这个网页，我必须快速修复它们，因此我再次要求。有人能帮我一下吗?

据我所知，你的正方形正在移动，因为。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');
}

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

scrollHeight = $(document).scrollTop();

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

$(document).scrollTop( scrollHeight );
相关文章：