Возвращаясь к одной и той же части страницы (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 контейнеров. Когда один из них щелкнут, div main скрыт и отображается «всплывающее окно» (см. Js).

Теперь представьте сценарий, в котором вы нажимаете поле «Пункт 10», расположенное в нижней части страницы. Затем отобразится div «popup». Если вы нажмете кнопку «Назад», вы снова увидите основное содержимое, но теперь вы находитесь в верхней части страницы, а не в «Позиция 10».

Я знаю, почему он прокручивается до верхней части страницы (потому что содержание popup короче по высоте, чем main div). Потому что div popup никогда не будет выше div main, есть ли способ «вернуться» в тот же раздел главного div?

Например, если вы нажмете «Пункт 10», и вы увидите всплывающее содержимое, нажмите «Вернуться назад», я хочу показать «Пункт 10» вместо «Пункт 1» (Надеюсь, я делаю смысл).

Answer 1

https://jsfiddle.net/h62hk07v/

Вместо того, чтобы прятать main DIV и показ popup на своем месте, вы можете использовать CSS фиксированное позиционирование, чтобы всплывающее окно, чтобы скрыть основной DIV. Затем, когда вы скрываете его, позиция прокрутки пользователя сохраняется. (Это как 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); 
}); 

Таким образом, вам не придется вносить изменения в свой макет.

Edit:

Это имеет обоснованное преимущество перед position: fixed;, как пользователи часто прокручивать страницу, когда содержимое на дисплее, таким образом, поражение цели возвращающихся позиций.

Edit 2:

Как @Jeremy Swinarton упоминалось легко предотвратить прокрутку, добавив еще один CSS свойство overflow:hidden; к телу, но аргумент до сих пор стоит, как содержание за модальным должно быть оказаны. В некоторых случаях это идеально (всплывающее окно не охватывает всю страницу), но в некоторых случаях, например, при работе с маломощными устройствами и с использованием моделей MVC, было бы идеально (в зависимости от вашей структуры) отображать один просмотр одновременно тем самым отделяя контент, чтобы обеспечить лучшую производительность.