Page scrolls down when I open modal window

Question

I have a long page, on which there are several anchor tags which open modal windows. (a href #)

When I click on it, the modal window opens and the background main page scrolls down a bit. When I close the modal window, it scrolls up a bit, but not to the top. This is causing bad user experience.

Opening the modal on a page which has no scrollbar is fine.

I have looked into various solutions, but none worked out for me whatsoever.

.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;
	    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 */
	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>
	
    <div class="modal">
      <div class="modal-content">
<div class="modal-header">

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

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

Any help would be appreciated.

Unknown Unknown · Accepted Answer · 2017-05-08T19:51:04

OK I found a solution. It is not smooth, because you can see how the scrollbar moves up and down for some miliseconds, but the background page remains on top at least

This did the trick for me:

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

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

});
</script>

Page scrolls down when I open modal window

1 Answers