当我打开模式窗口时向下滚动页面

问题描述：

我有一个长页面，其上有几个可打开模态窗口的锚点标记。（a href #）当我打开模式窗口时向下滚动页面

当我点击它时，模态窗口打开，背景主页向下滚动一点。当我关闭模式窗口时，它会向上滚动一点，但不会滚动到顶部。这造成了不好的用户体验。

打开没有滚动条的页面上的模式是好的。

我已经研究过各种解决方案，但没有任何解决方法。

.modal { 
 
    display: none; /* Hidden by default */ 
 
    position: absolute; /* Stay in place */ 
 
    z-index: 1; /* Sit on top */ 
 
    padding-top: 100px; /* Location of the box */ 
 
    left: 0; 
 
    top: 0; 
 
\t  overflow-y: auto; 
 
    width: 100%; /* Full width */ 
 
    overflow: auto; /* Enable scroll if needed */ 
 
    background-color: rgb(0,0,0); /* Fallback color */ 
 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
 
\t font-family: 'Georgia', monospace, serif; 
 
} 
 

 

 

 

 

 
/* Modal Content */ 
 
.modal-content { 
 
    position: relative; 
 
    background-color: #fefefe; 
 
    margin: auto; 
 
    padding: 0; 
 
    font-family: 'Georgia', monospace, serif; 
 
    border: 1px solid #888; 
 
    width: 400px; 
 

 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 

 
} 
 
.modal-header { 
 
    padding: 2px 16px; 
 
    background-color: black; 
 
    color: white; 
 
    font-family: 'Georgia', monospace, serif; 
 
} 
 

 

 
/* Behaviour on legacy browsers */ 
 
.target:target + .modal { 
 
    display: block; 
 
} 
 

 
/* Fallback for IE8 */ 
 
.modal.is-expanded { 
 
    display: block; 
 
} 
 
.modal.is-expanded > .content { 
 
    top: 50%; 
 
    margin-top: -45px; 
 
} 
 

 

 

 
/* Behavior on modern browsers */ 
 
:root .modal { 
 
    display: block; 
 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
 
    transition: transform 0.3s cubic-bezier(0.5, -0.5, 0.5, 1.5); 
 
    transform-origin: center center; 
 
    transform: scale(0, 0); 
 
} 
 
:root .modal > .content { 
 
    box-shadow: 0 5px 20px rgba(0,0,0,0.5); 
 
} 
 
:root .target:target + .modal { 
 
    transform: scale(1, 1); 
 
} 
 

 
/* The Close Button */ 
 

 
.close-btn:hover, 
 
.close-btn:focus { 
 
    cursor: pointer; 
 
} 
 
.modal > .modal-content .modal-header .close-btn { 
 
    position: absolute; 
 
    top: 18px; 
 
    right: 18px; 
 
    width: 15px; 
 
    height: 15px; 
 
    color: white; 
 
    font-size: 18px; 
 
    text-decoration: none; 
 
} 
 

 
.modal-body {padding: 2px 16px;} 
 
    
 
.modal-open { 
 
    -moz-appearance: menuimage; 
 
} 
 

 
.modal-open::-webkit-scrollbar { 
 
    width: 0 !important; 
 
}

<span id="start" class="target"><!-- Hidden anchor to close all modals --></span> 
 
    <span id="userinfo" class="target"><!-- Hidden anchor to open adjesting modal container--></span> 
 
\t 
 
    <div class="modal"> 
 
     <div class="modal-content"> 
 
<div class="modal-header"> 
 

 
     <h2>User Info</h2> 
 
\t <a class="close-btn" href="#start" ><i class="fa fa-times"></i></a> 
 

 
\t \t  </div> 
 
\t \t \t  <div class="modal-body"> 
 
content.... 
 
    </div> 
 
     </div> 
 
    </div> 
 
\t <a href="#userinfo"><i class="fa fa-user fa-lg"></i></a>

任何帮助，将不胜感激。

答

好的我找到了解决方案。它并不顺利，因为你可以看到滚动条是如何为一些毫秒上下移动，但背景页面仍保留在顶部至少

这为我做的伎俩：

<script> 
 
$(document).ready(function() { 
 

 
$(window).on('hashchange', function (event) { 
 
window.scrollTo(0, 0); 
 
}); 
 

 
}); 
 
</script>

“您可以在2天内接受您自己的答案” –

当我打开模式窗口时向下滚动页面

相关推荐