Question

所以，这是代码

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

这是设置。

主div中有10个容器。单击其中一个时，隐藏main div并弹出＆＃34; popup＆＃34;显示（见js）。

现在，想象一下您点击＆＃34;项目10＆＃34;框位于页面底部。那么＆＃34; popup＆＃34;将显示div。如果你点击＆＃34;回去＆＃34;按钮然后您将再次看到主要内容，但现在您位于页面顶部，而不是＆＃34;项目10＆＃34;。

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

例如，如果您单击＆＃34;项目10＆＃34;，并且您看到弹出内容，则单击＆＃34;返回＆＃34;，我想显示＆＃34;项目10＆＃ 34;而不是＆＃34;项目1和＃34; （希望，我有意义）。

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因此，分离内容以提供更好的性能。

Answer 2

https://jsfiddle.net/h62hk07v/

您可以使用CSS固定定位来允许弹出窗口覆盖主div，而不是隐藏main div并在其位置显示popup。然后，当您隐藏它时，将保留用户的滚动位置。（这就是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();    
});

回到页面的同一部分（css / jQuery）

2 个答案: