ASP.NET Core 如何实现返回列表页时自动滚动到此前选中的行

核心实现流程 #

整个功能不需要依赖额外的第三方组件，整体逻辑拆为三个连贯环节，确保返回时能精准回到之前选中的记录位置：

• 列表页跳转详情前，捕获当前选中记录的唯一标识、页面滚动位置两个关键上下文
• 详情页返回时，将上下文带回列表页路由，不直接依赖浏览器原生返回的默认行为
• 列表页数据渲染完成后，读取上下文先恢复基础滚动位置，再精准定位目标记录行，配合临时高亮提示确认位置正确

分步落地实现 #

1. 跳转详情前捕获定位上下文 #

在列表页的数据行上绑定自定义属性存储记录唯一ID，点击行跳转时同步捕获当前滚动位置，两种存储方式可按场景选择：

• 轻量场景：将定位参数拼接到详情页路由的查询串中，无需服务端额外存储
• 跨操作场景：将定位信息存入浏览器sessionStorage，即使用户在详情页做了刷新、短时间操作也不会丢失上下文

示例代码（列表页行点击逻辑）：

// 为所有数据行绑定点击事件
document.querySelectorAll('.table-row').forEach(row => {
  row.addEventListener('click', function () {
    // 从行的自定义属性读取记录唯一ID
    const recordId = this.dataset.recordId;
    // 捕获当前页面垂直滚动距离
    const currentScrollTop = window.scrollY;
    // 存入sessionStorage作为定位上下文
    sessionStorage.setItem('listScrollContext', JSON.stringify({
      targetRecordId: recordId,
      scrollTop: currentScrollTop
    }));
    // 正常跳转至详情页
    window.location.href = `/Detail/Index?recordId=${recordId}`;
  })
})

对应的行标签在ASP.NET Core Razor页面中可这样写：<tr class="table-row" data-record-id="@item.Id">

2. 配置详情页返回逻辑 #

详情页的返回按钮不要直接触发history.back()，需要先校验是否存在之前存储的定位上下文：

• 如果存在定位上下文，直接导航回列表页，确保定位逻辑能被触发
• 如果不存在定位上下文，再走浏览器原生返回逻辑

示例代码（详情页返回按钮逻辑）：

document.querySelector('#backToListBtn').addEventListener('click', function () {
  const scrollContext = sessionStorage.getItem('listScrollContext');
  // 存在定位上下文时，主动导航回列表页
  if (scrollContext) {
    window.location.href = '/List/Index';
  } else {
    history.back();
  }
})

3. 列表页渲染完成后执行自动定位 #

定位逻辑必须绑定在列表DOM（尤其是所有数据行）渲染完成的时机执行，避免因元素未加载导致定位失败。定位操作分两层保障准确性：

1. 先根据之前存储的滚动距离，快速将页面拉到大致浏览位置，减少长列表的滚动距离
2. 再通过记录ID匹配对应的行元素，将其滚动到可视区域中心，弥补因列表数据动态更新导致的滚动距离偏差，同时给目标行加临时高亮，让用户清晰识别之前选中的记录

示例代码（列表页定位逻辑）：

// 等待DOM完全加载
window.addEventListener('load', function () {
  const scrollContext = sessionStorage.getItem('listScrollContext');
  // 没有定位上下文时直接退出，不影响正常浏览
  if (!scrollContext) return;

  const { targetRecordId, scrollTop } = JSON.parse(scrollContext);
  // 第一步：先恢复基础滚动位置
  window.scrollTo({ top: scrollTop, behavior: 'instant' });

  // 第二步：精准定位目标记录行
  const targetRow = document.querySelector(`.table-row[data-record-id="${targetRecordId}"]`);
  if (targetRow) {
    // 将目标行滚动到可视区中心
    targetRow.scrollIntoView({ block: 'center', behavior: 'smooth' });
    // 加3秒临时高亮提示
    targetRow.classList.add('row-highlight');
    setTimeout(() => targetRow.classList.remove('row-highlight'), 3000);
  }

  // 定位完成后清理临时存储，避免下次浏览重复触发定位
  sessionStorage.removeItem('listScrollContext');
})

常见场景适配 #

• 如果列表采用虚拟滚动、分页加载模式：定位前需要先校验目标行是否在当前已渲染的DOM中，如果不在，需要先自动切换到目标记录所在的分页、加载对应数据，等数据渲染完成后再执行滚动操作
• 需要兼容浏览器原生返回按钮触发的场景：将定位逻辑放在列表页的全局加载钩子中，不管是从详情页点按钮返回，还是用户直接点浏览器返回键，只要存在存储的定位上下文，就自动执行定位流程
• 若列表数据存在高频更新：优先靠记录ID匹配定位的方式，不要完全依赖存储的滚动距离值，避免新数据插入导致位置错位

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