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

Question

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

您可以看到behavior here这是 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> 中使用单个哈希值。 ，这使其滚动到顶部

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

使用即#close它会起作用的

来源:How does "#" (hash mark, number sign) close a modal box?

---

作为旁注，here is a post of mine ，有许多有趣的仅 CSS 答案，可能是一个选项，而不是 hash making history entries提到的问题@AnkithAmtange