css3模态关闭后如何防止页面滚动到顶部？

Question

所以，我正在使用一些 css3 弹出窗口/模式。我对它们的工作方式非常满意，但是在模式关闭后，页面滚动回到顶部，我不确定为什么会发生这种情况。

你可以在这里看到行为这是 html 的片段

   <div class="flip">
   <div class="front">
   <img src="images/SDG_ICONS/SDG01.png" alt="No Poverty" />
   </div>
   <div class="back">
      <ul>
        <a href="#ared-no-poverty"><li>ARED</li></a>
        <a href="#agrocenta-no-poverty"><li>AgroCenta</li></a>
        <a href="#tilly-no-poverty"><li>Tilly&#39;s Farm</li></a>
      </ul>
   </div>
   </div>
   <div id="ared-no-poverty" class="overlay">
     <div class="popup">
       <h2>ARED</h2>
       <a class="close" href="#"> &times;</a>
       <p class="popup">Some text in here</p>
</div>

这是我用于弹出窗口/模式的 css

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

那么，如何保持与调用弹出窗口时相同的滚动位置以及是什么导致模式滚动到顶部？

Answer 1

它滚动到顶部的问题是，当您关闭覆盖层时，您在 中使用单个哈希<a class="close" href="#"> &times;</a>，这使得它滚动到顶部

要实现此功能，您可以使用脚本，或者，如果每个链接都有自己的覆盖层，您可以定位同级元素以使其在关闭时保持不变

使用ie#close就可以了

Src：“#”（井号、数字符号）如何关闭模式框？

作为旁注，这是我的一篇文章，其中有许多有趣的仅 CSS 答案，这些答案可能是一个选项，而不是hash making history entries@AnkithAmtange 提到的问题