静态网页生成图片缩略图并实现点击跳转至原图的问题

你当前的代码只在gallery容器里生成了独立的<img>标签，没有包裹跳转用的<a>链接；同时页面里的原图没有设置唯一锚点ID，导致点击缩略图时没有可跳转的目标位置，这就是跳转功能失效的核心原因。

步骤1：给原图添加唯一锚点ID #

先给mydata容器里的每张原图设置唯一ID，让跳转链接有明确的目标：

<div id='mydata'>
  <img id="img-x" src='x.jpg'/>
  <img id="img-1" src='1.jpg'/>
  <img id="img-2" src='2.jpg'/>
  <img id="img-3" src='3.jpg'/>
</div>

<div id='gallery'>
  <!-- JS将自动生成缩略图跳转链接 -->
</div>

步骤2：修改JS代码生成带跳转功能的缩略图 #

调整循环逻辑，给每张缩略图包裹<a>标签，让href指向对应原图的ID，同时添加缩略图尺寸样式：

// 遍历所有原图元素
$('.img-class').each(function(index, element) {
    // 获取原图的src和ID
    const imgSrc = $(this).attr('src');
    const imgId = $(this).attr('id');

    // 生成带跳转链接的缩略图HTML
    const thumbnailHtml = `
      <a href="#${imgId}" class="thumbnail-link">
        <img src="${imgSrc}" width="50" height="50" alt="缩略图"/>
      </a>
    `;

    // 插入到gallery容器末尾
    $('#gallery').append(thumbnailHtml);
});

可选优化：自动给原图生成ID #

如果原图没有提前设置ID，可以在JS循环时自动生成唯一标识：

$('.img-class').each(function(index, element) {
    // 自动生成唯一ID（基于循环索引）
    const imgId = `img-${index}`;
    $(this).attr('id', imgId);
    
    const imgSrc = $(this).attr('src');
    const thumbnailHtml = `
      <a href="#${imgId}" class="thumbnail-link">
        <img src="${imgSrc}" width="50" height="50" alt="缩略图"/>
      </a>
    `;
    $('#gallery').append(thumbnailHtml);
});

额外体验优化 #

如果需要平滑滚动到原图的效果，只需添加一行CSS：

html {
  scroll-behavior: smooth;
}

内容的提问来源于stack exchange，提问作者Patoshi パトシ