如何让后退链接返回包含锚点的完整过滤分类URL？

方法一：在筛选页面手动记录带锚点的历史条目 #

当用户点击筛选菜单切换房源分类时，用history.pushState将带锚点的完整URL添加到浏览器历史记录中，后续调用history.back()就能回到正确的锚点位置：

// 示例：切换分类时执行这段代码
const targetAnchor = 'listing-category'; // 替换为当前选中的分类锚点
const fullUrl = `/residential/#${targetAnchor}`;
// 将带锚点的URL推入历史栈
history.pushState({ path: fullUrl }, '', fullUrl);

方法二：跳转详情页时传递锚点参数 #

在筛选页面的房源缩略图链接中，把当前分类的锚点作为URL参数传递到详情页：

<!-- 筛选页面的房源链接示例 -->
<a href="/property-detail?fromAnchor=listing-category">查看房源详情</a>

然后在房源详情页，读取参数并构建返回链接：

<a class="back-link" href="/residential/">返回</a>

<script>
// 获取URL中的锚点参数
function getUrlParam(paramName) {
  return new URLSearchParams(window.location.search).get(paramName);
}

const fromAnchor = getUrlParam('fromAnchor');
const backLink = document.querySelector('.back-link');
if (fromAnchor) {
  // 构建带锚点的返回URL
  backLink.href = `/residential/#${fromAnchor}`;
}
</script>

方法三：利用来源URL跳转 #

如果无法修改筛选页面的跳转逻辑，可尝试从详情页的document.referrer获取来源URL，直接跳转回去：

<a href="#" onclick="handleBack()">返回</a>

<script>
function handleBack() {
  const referrer = document.referrer;
  if (referrer.includes('/residential/')) {
    window.location.href = referrer;
  } else {
    history.back();
  }
}
</script>

注：这种方式依赖浏览器发送的referrer信息，部分场景下可能会被浏览器安全策略限制。

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