返回页面的同一部分（CSS/jQuery的）

Question

所以，这里是代码

jQuery('.item').click(function() { \t \t 
 
    jQuery('.popup').show(); 
 
    jQuery('.main').hide(); \t 
 
}); \t 
 

 
jQuery('.go_back').click(function() { \t \t 
 
    jQuery('.main').show(); 
 
    jQuery('.popup').hide(); \t 
 
}); \t

.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将被隐藏，并显示“弹出”（请参阅​​js）。

现在，想象一下您单击位于页面底部的“Item 10”框的场景。然后将显示“弹出”div。如果点击“返回”按钮，则会再次看到主要内容，但现在您位于页面的顶部，而不是“项目10”。

我知道它为什么滚动到页面顶部（因为popup内容的高度比main div更短）。因为popup div永远不会比main div更高，有没有办法“回到”主要div的同一部分？

例如，如果您单击“项目10”，并且您看到弹出内容，则单击“返回”，我想显示“项目10”而不是“项目1”（希望，我正在制作感）。

Answer 1

https://jsfiddle.net/h62hk07v/

而是躲在main DIV并显示在它的地方popup的，你可以使用CSS固定定位，以允许弹出来掩盖主股利。然后，当您隐藏它时，用户的滚动位置将被保留。 （这是怎么Bootstrap's modals工作。）

CSS

.popup { 
    position:fixed; 
    width:100%; 
    height:100%; 
    background-color:white; 
    top:0; 
    left:0; 
    z-index:30; 
} 

jQuery的

jQuery('.item').click(function() {  
    jQuery('.popup').show(); 
}); 

jQuery('.go_back').click(function() {  
    jQuery('.popup').hide();  
}); 

这样做的

Answer 2

一个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模型时，它将是理想的（取决于您的结构）一次呈现一个视图从而分离内容以提供更好的性能。