javascript - 返回页面的同一部分(css/jQuery)

Question

所以，这是代码

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”(希望，我是有道理的).

Answer 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 是理想的(取决于您的结构)从而分离内容以提供更好的性能。