时间戳

首页 > 解决方案 > CSS覆盖关闭按钮滚动到页面顶部

javascript - CSS覆盖关闭按钮滚动到页面顶部

问题描述

我有一个纯 CSS 解决方案，单击锚点会在 div 顶部显示覆盖图像。它工作正常，除了关闭按钮在单击时滚动到页面顶部，我希望它关闭然后保留在页面上的当前位置。我尝试将 div ID 添加到 href 但覆盖层没有关闭，这可以仅使用 CSS 完成吗？任何帮助表示赞赏，非常感谢。

.popup .close {
  position: absolute;
  top: 70px;
  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;
}
<div id="popup1" class="overlay">
  <div class="popup">
    <a class="close" href="#">&times;</a>
    <div class="content">
      <img src="./assets/map-overlay.png">
    </div>
  </div>
</div>

标签： javascripthtmlcssbutton

解决方案

在过去，我想阻止点击链接滚动到页面顶部，对我来说，我已经使用过href="#!"并且可以防止滚动到页面顶部

推荐阅读