返回頁面的同一部分（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模型時，它將是理想的（取決於您的結構）一次呈現一個視圖從而分離內容以提供更好的性能。