title: How to prevent page from scrolling to top after css3 modal is closed?
body: <p>So, I have some css3 popups/modals that I'm working with. I'm mostly pretty happy with the way that they work, but after the modal is closed the page scrolls back up to the top and I'm not sure why this is happening. </p>
  
  <p>You can see the <a href="http://46.101.194.36/greentec-capital.com/index.php/about-us/impact#" rel="nofollow noreferrer">behavior here</a> Here's a snippet of the html</p>
  
  <pre><code>   &lt;div class="flip"&gt;
     &lt;div class="front"&gt;
     &lt;img src="images/SDG_ICONS/SDG01.png" alt="No Poverty" /&gt;
     &lt;/div&gt;
     &lt;div class="back"&gt;
        &lt;ul&gt;
          &lt;a href="#ared-no-poverty"&gt;&lt;li&gt;ARED&lt;/li&gt;&lt;/a&gt;
          &lt;a href="#agrocenta-no-poverty"&gt;&lt;li&gt;AgroCenta&lt;/li&gt;&lt;/a&gt;
          &lt;a href="#tilly-no-poverty"&gt;&lt;li&gt;Tilly&amp;#39;s Farm&lt;/li&gt;&lt;/a&gt;
        &lt;/ul&gt;
     &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="ared-no-poverty" class="overlay"&gt;
       &lt;div class="popup"&gt;
         &lt;h2&gt;ARED&lt;/h2&gt;
         &lt;a class="close" href="#"&gt; &amp;times;&lt;/a&gt;
         &lt;p class="popup"&gt;Some text in here&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the css I'm using for the popup/modals</p>
  
  <pre><code>.popup {
    margin: 70px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 30%;
    position: relative;
    transition: all 5s ease-in-out;
      z-index: 2;
  }
  .popup h2 {
    margin-top: 0;
    color: #333;
    font-family: Tahoma, Arial, sans-serif;
  }
  img.popup{
  width:150px;
  height: auto;
  float:left;
  }
  .popup p{
  width:auto;
  margin:0;
  }
  .popup p:nth-child(2){
  padding-top:5px;
  }
  .popup .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
  }
  .popup .close:hover {
    color: #06D85F;
  }
  .popup .content {
    max-height: 30%;
    overflow: auto;
  }
  .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(88, 120, 33, 0.7); /*0,0,0*/
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
      z-index: 2;
  }
  .overlay:target {
    visibility: visible;
    opacity: 1;
  }
  </code></pre>
  
  <p>So, how can I keep the at the same scroll position as when the popup was called and what is causing the modal to scroll to the top?</p>