モーダルウィンドウを開くとページがスクロールします

Question

モーダルウィンドウを開くアンカータグがある長いページがあります。 （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>

任意の助けいただければ幸いです。

Answer 1

OKソリューションを見つけました。あなたはスクロールバーは、いくつかのミリ秒のために上下に移動どのように見ることができますので、スムーズではなく、背景ページは、これは私のためのトリックでし少なくとも

上に残っている：

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

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

 
}); 
 
</script>

を