所以,这是代码
jQuery('.item').click(function() {
jQuery('.popup').show();
jQuery('.main').hide();
});
jQuery('.go_back').click(function() {
jQuery('.main').show();
jQuery('.popup').hide();
});
.box{
border-style: solid;
width: 100px;
height: 100px;
margin: 16px;
cursor: pointer;
}
.popup_content{
border-style: solid;
width: 200px;
height: 200px;
margin: 16px;
background-color: #3f51b5;
color: #fff;
padding:16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="item item_1" data-id="item_1">
<div class="box container_1 ">
Item 1
</div>
</div>
<div class="item item_2" data-id="item_2">
<div class="box container_2">
Item 2
</div>
</div>
<div class="item item_3" data-id="item_3">
<div class="box container_3">
item 3
</div>
</div>
<div class="item item_4" data-id="item_4">
<div class="box container_4">
Item 4
</div>
</div>
<div class="item item_5" data-id="item_5">
<div class="box container_5">
Item 5
</div>
</div>
<div class="item item_6" data-id="item_6">
<div class="box container_6">
Item 6
</div>
</div>
<div class="item item_7" data-id="item_7">
<div class="box container_7">
Item 7
</div>
</div>
<div class="item item_8" data-id="item_8">
<div class="box container_8">
Item 8
</div>
</div>
<div class="item item_9" data-id="item_9">
<div class="box container_9">
Item 9
</div>
</div>
<div class="item item_10" data-id="item_10">
<div class="box container_10">
Item 10
</div>
</div>
</div>
<div class="popup" style="display:none;">
<div class="popup_content">
Popup content
</div>
<button type="button" class="go_back">Go back</button>
</div>
这是设置。
主 div 中有 10 个容器。单击其中一个时,隐藏 main
div 并显示“popup”(参见 js)。
现在,想象一下您单击位于页面底部的“元素 10”框的场景。然后将显示“弹出”div。如果单击“返回”按钮,您将再次看到主要内容,但现在您位于页面顶部,而不是“第 10 项”。
我知道为什么它会滚动到页面顶部(因为 popup
内容的高度比 main
div 短)。因为 popup
div 永远不会比 main
div 高,有没有办法“返回”到主 div 的同一部分?
例如,如果你点击“Item 10”,你看到弹出内容,然后你点击“Go back”,我想显示“Item 10”而不是“Item 1”(希望,我是有道理的).
最佳答案
执行此操作的 JavaScript 方法是使用一个新变量来缓存滚动的位置:
https://jsfiddle.net/csj7k4m1/1/
var PositionCache = 0;
jQuery('.item').click(function() {
PositionCache = jQuery('body').scrollTop();
jQuery('.popup').show();
jQuery('.main').hide();
});
jQuery('.go_back').click(function() {
jQuery('.main').show();
jQuery('.popup').hide();
jQuery('body').scrollTop(PositionCache);
});
这样您就不必对布局进行修改。
编辑:
与 position: fixed;
相比,这有一个有争议的优势,因为用户经常在显示内容时滚动页面,从而破坏了返回位置的目的。
编辑 2:
正如@Jeremy Swinarton 提到的,通过向正文添加另一个 css 属性 overflow:hidden;
很容易防止滚动,但参数仍然存在,因为模态后面的内容需要呈现。在某些情况下这是理想的(弹出窗口不会覆盖整个页面)但在某些情况下,例如在处理低功率设备和使用 MVC 模型时,一次呈现一个 View 是理想的(取决于您的结构)从而分离内容以提供更好的性能。
关于javascript - 返回页面的同一部分(css/jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33703100/