Django中返回上一页时如何定位至原点击图片位置

当然可以实现，核心思路是利用锚点链接结合Django模板变量传递唯一标识，具体步骤如下：

1. 给画廊页的每个图片容器添加唯一ID #

修改你的目标跳转页面（画廊页）代码，把循环中重复的id="gallerygrid2"替换为基于图片唯一标识的ID（比如用图片的slug，你已经在详情页路由中使用了这个字段）：

<body>
  <header>{% include 'navbardesktop.html' %}</header>
  <div class="container-gallery">
    <div class="col-md-12" id="gallerygrid1">
      <div class="row">
        {% for photo in images %}
        <!-- 替换为唯一ID，确保每个图片容器标识不重复 -->
        <div class="col-md-4" id="photo-{{ photo.slug }}">
          <a href="{% url 'viewimage' photo.slug %}">
            <img
              class="gallery-thumbnail"
              src="{{photo.image.url}}"
              style=""
            />
          </a>
        </div>
        {% empty %}
        <h3>No Projects...</h3>
        {% endfor %}
      </div>
    </div>
  </div>
</body>

2. 修改详情页的返回链接，带上对应锚点 #

在点击图片跳转的页面（详情页），给所有返回画廊的链接加上对应图片的锚点：

<body>
  <header>{% include 'navbardesktop.html' %}</header>
  <div class="image-container">
    <div class="image-post">
      <!-- 图片返回链接添加锚点 -->
      <a href="{% url 'gallery' %}#photo-{{ photo.slug }}">
        <img class="photo-img" src="{{photo.image.url}}" />
      </a>
      <h2 class="photo-title">{{photo.image_title}}</h2>
      <p class="contact">
        Interested in purchasing this as a print? Contact me for more
        information regarding price and sizes.
      </p>
      <a href="{% url 'contact' %}" class="btn btn-secondary" type="button"
        >Contact</a
      >
      <!-- Gallery按钮同样添加锚点 -->
      <a href="{% url 'gallery' %}#photo-{{ photo.slug }}" class="btn btn-secondary" type="button"
        >Gallery</a
      >
    </div>
  </div>
</body>

3. 优化锚点定位（避免被固定导航栏遮挡） #

如果你的导航栏是固定在页面顶部的，锚点定位后图片可能会被导航栏遮挡，给每个图片容器添加scroll-margin-top样式：

/* 数值根据你的导航栏高度调整，示例为80px */
[id^="photo-"] {
  scroll-margin-top: 80px;
}

完成以上修改后，用户从详情页点击返回链接时，页面会自动滚动到最初点击的图片位置。

补充说明 #

如果不想用锚点，也可以通过Django的session记录页面滚动位置，但锚点方法无需额外后端逻辑，更简单直接，适配你的场景。

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