You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Modal图片画廊关闭后跳转至顶部的问题咨询

avatar
API 探路者
2026-7-28
问题描述

我正在开发一个Modal图片画廊，点击前两张图片可放大查看，但关闭图片后页面会跳转至顶部。请问能否实现关闭后停留在页面原位置，而非滚动到顶部？

复现步骤：

  • 点击顶部前两张图片打开放大视图
  • 向下滚动页面一点
  • 点击关闭按钮，页面会跳回顶部

原代码如下：

CSS 代码 

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #f5f6f7;
}

.header {
  text-align: center;
  text-transform: uppercase;
  padding: 32px;
  background-color: #0a0a23;
  color: #fff;
  border-bottom: 4px solid #fdb347;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
}

.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

.gallery::after {
  content: "";
  width: 350px;
}


.lightbox-target {
  position: fixed;
  top: -100%;
  width: 100%;
  background: rgba(0,0,0,.7);
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  overflow: hidden;
   
  }
  
  .lightbox-target img {
  margin: auto;
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  border: 3px solid white;
  box-shadow: 0px 0px 8px rgba(0,0,0,.3);
  box-sizing: border-box;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
    
  }
  
  a.lightbox-close {
  display: block;
  width:50px;
  height:50px;
  box-sizing: border-box;
  background: white;
  color: black;
  text-decoration: none;
  position: absolute;
  top: -80px;
  right: 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  }
  
  a.lightbox-close:before {
  content: "";
  display: block;
  height: 30px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top:10px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
  }
  
  a.lightbox-close:after {
  content: "";
  display: block;
  height: 30px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top:10px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
  }
  
  .lightbox-target:target {
  opacity: 1;
  top: 0;
  bottom: 0;
  overflow:scroll;
  }
  
  .lightbox-target:target img {
  max-height: 100%;
  max-width: 100%;
  }
  
  .lightbox-target:target a.lightbox-close {
  top: 0;
  }

HTML 代码 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal images test</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
      <a class="lightbox" href="#dog"><img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"></a>
      <a class="lightbox" href="#dog2"><img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"></a>
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
    </div>

   <div class="lightbox-target" id="dog">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
      <a class="lightbox-close" href="#"></a>
   </div>
   <div class="lightbox-target" id="dog2">
    <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
    <a class="lightbox-close" href="#"></a>
 </div>
  </body>
</html>
问题原因

问题出在关闭按钮的<a class="lightbox-close" href="#"></a>：点击该链接时，浏览器会默认跳转到页面锚点#，也就是页面顶部，导致滚动位置丢失。同时原实现依赖:target伪类控制lightbox的显示/隐藏，点击#会清除当前target，从而关闭lightbox。

解决方案

我们可以通过JavaScript阻止默认跳转+保留滚动位置来解决，同时保留原CSS的过渡动画效果：

修改后的完整代码

HTML 部分 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal images test</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
      <a class="lightbox" href="#dog"><img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"></a>
      <a class="lightbox" href="#dog2"><img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"></a>
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
    </div>

   <div class="lightbox-target" id="dog">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
      <a class="lightbox-close" href="javascript:void(0)"></a>
   </div>
   <div class="lightbox-target" id="dog2">
    <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
    <a class="lightbox-close" href="javascript:void(0)"></a>
 </div>

 <script>
 document.querySelectorAll('.lightbox-close').forEach(closeBtn => {
  closeBtn.addEventListener('click', function() {
    // 保存当前滚动位置
    const currentScroll = window.scrollY;
    // 移除URL中的hash，触发lightbox关闭（原CSS的:target伪类失效）
    window.history.replaceState(null, document.title, window.location.pathname + window.location.search);
    // 恢复滚动位置
    window.scrollTo(0, currentScroll);
  });
 });
 </script>
  </body>
</html>

核心修改点

  1. 将关闭按钮的href改为javascript:void(0)，阻止默认跳转行为
  2. 添加JavaScript代码：
    • 点击关闭按钮时保存当前滚动位置
    • 通过history.replaceState移除URL中的hash，让原CSS的:target伪类失效，自动关闭lightbox
    • 恢复之前保存的滚动位置，确保页面停留在原位置

CSS代码无需修改，原有的过渡动画会正常生效。

内容的提问来源于stack exchange，提问作者michalb93

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.28 12:47:05