javascript - 如何确保后退按钮将我带到单击图像之前我所在的部分？

Question

我有一个 HTML 页面，其中有大约 4-5 个图像列表。 单张图片(item-detail.component.html)的HTML代码如下所示:

<span class="badge" id="heart-badge{{item.$id}}">
  <div (click)="badgeHeartEmpty()" id="heartHide{{item.$id}}">
    <img id="badge-item-heart-noborder-empty" src="/assets/images/Empty-Heart.png">
  </div>
  <div [style.display]= " 'none' " (click)="badgeHeartFull()" id="heartShow{{item.$id}}">
    <img id="badge-item-heart-noborder-full" src="/assets/images/Full-Heart-Blue.png">
  </div>
</span>

<!-- This is the code which shows item images and item details -->
<a href="/attendee-item/{{item.$id}}">
    <img class="card-img-top" src="{{item.image_url}}" alt="Card image cap" id="card-img">
    <div class="card-body">
        <div class="auction-item-title">
            <h1 id="auction-item-title">{{item.name}}</h1>
        </div>
        <div class="auction-item-bid-title">
            <div class="auction-item-title-left">
                <p id="auction-item-bid-title">Current Bid: ${{item.bid}}</p>
                <p id="auction-item-bid-title">Value: ${{item.value}}</p>
            </div>

            <div class="auction-item-title-right">
                <p id="auction-item-bid-title2">About this item</p>
            </div>

        </div>
    </div>
</a>
<bid-button [item]="item"></bid-button>

现在，如果我点击上面的项目(如您所见，它上面有一个 href 标签)，它会在新页面上向我显示该图片的详细描述，并且该页面还有一个后退按钮在顶部。下面是新页面上后退按钮的代码:

<div class="item-top-bar">
    <div class="item-back-bar">
    <!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
        <p id="item-back-bar-link"><a id="item-back-bar-link" href="/attendee-home"><</a></p>
    </div>
    <div class="item-pagination-bar">
        <a (click)="prevItem()"><p id="item-pagination-bar-text">LAST ITEM</p></a>
        <a (click)="nextItem()"><p id="item-pagination-bar-text">NEXT ITEM</p></a>
    </div>
</div>

问题陈述:

现在，如果我点击后退按钮，它会将我带到主页但我想要的是它应该将我带到我之前所在的图像部分。

这可能吗？我的意思是，如果我有多个图片部分，如果我点击让我们说第 4 张图片，那么它将打开第四张图片页面的详细描述，现在如果我按下后退按钮，它应该会带我到图片的第四部分，我在那里之前是。

Answer 1

如果要返回，应该使用javascript中的back()函数

function goBack() {
    window.history.back();
}

<button onclick="goBack()">Go Back</button>

这里是一个如何使用它的小例子，现在你可以让它适应你的页面