Seite scrollt nach unten, wenn ich modales Fenster öffne

Question

Ich habe eine lange Seite, auf der es mehrere Anker-Tags gibt, die modale Fenster öffnen. (a href #)

Wenn ich darauf klicke, öffnet sich das modale Fenster und die Hintergrund-Hauptseite scrollt ein wenig nach unten. Wenn ich das modale Fenster schließe, scrollt es ein wenig nach oben, aber nicht nach oben. Dies führt zu einer schlechten Benutzererfahrung.

Das Modal auf einer Seite öffnen, die keine Bildlaufleiste hat, ist in Ordnung.

Ich habe mir verschiedene Lösungen angeschaut, aber für mich hat noch nichts geklappt.

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

Jede Hilfe würde geschätzt.

Answer 1

OK Ich habe eine Lösung gefunden. Es ist nicht glatt, da kann man sehen, wie die Bildlaufleiste nach oben und unten für einige Millisekunden bewegt, aber die Hintergrundseite bleibt oben mindestens

Diese den Trick für mich getan hat:

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

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

 
}); 
 
</script>