html - Page scrolls to top when modal is closed -

i have implemented modal, don't want page scroll top when modal closed. automatically. there code governing code below missing? help!

html

<a href="#target-content" id="button">open modal</a>  <div id="target-content">   <a href="#" class="close"></a>   <div id="target-inner">     <h2>modal heading</h2>     <p>modal content</p>   </div> </div> 

css

#target-content {   position: fixed;   top: 0;   right: 0;   bottom: 0;   left: 0;   pointer-events: none;   opacity: 0;   -webkit-transition: opacity 200ms;   transition: opacity 200ms; }  #target-content:target {   pointer-events: all;   opacity: 1; }  #target-content #target-inner {   position: absolute;   display: block;   padding: 48px;   line-height: 1.8;   width: 70%;   top: 50%;   left: 50%;   -webkit-transform: translatex(-50%) translatey(-50%);   -ms-transform: translatex(-50%) translatey(-50%);   transform: translatex(-50%) translatey(-50%);   box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);   background: white;   color: #34495e; }  #target-content #target-inner h2 { margin-top: 0; }  #target-content #target-inner code { font-weight: bold; }  #target-content a.close {   content: "";   position: absolute;   top: 0;   right: 0;   bottom: 0;   left: 0;   background-color: #34495e;   opacity: 0.5;   -webkit-transition: opacity 200ms;   transition: opacity 200ms; }  #target-content a.close:hover { opacity: 0.4; } 

the # in href attribute send page top.

<a href="#" class="close"></a> <!-- moves scroll position top of page --> 

one solution replace # particular id want page go or stay.

try this:

<a href="#target-content" class="close"></a> 

read more hyperlinks , hashtags here: what href="#" , why used?