Infinite Ajax Scroll问题：返回按钮跳转至错误滚动位置

在Shopify商品集合页测试Infinite Ajax Scroll基础实现时，加载更多功能正常，但用户跳转至其他页面后点击返回按钮，页面会回到底部而非之前的滚动位置。当前使用代码如下：

let ias = new InfiniteAjaxScroll('.collection-grid', {
  item: '.grid-product',
  next: '.pagination__next',
  //pagination: '.pagination'
});

// update title and url then scrolling through pages
ias.on('page', (e) => {
  document.title = e.title;

  let state = history.state;

  history.replaceState(state, e.title, e.url);
});

原以为返回按钮默认能正常工作，是否需要手动跟踪滚动位置？

解决方案 #

是的，必须手动跟踪并记录滚动位置——Infinite Ajax Scroll默认不会自动处理浏览器历史记录中的滚动状态，得自己加逻辑来实现。具体修改步骤如下：

1. 页面加载时恢复滚动位置
   当用户通过返回按钮回到页面时，检查历史记录状态里是否存了滚动位置，有的话直接定位过去：

// 页面加载时恢复之前的滚动位置
window.addEventListener('load', () => {
  if (history.state && history.state.scrollY) {
    window.scrollTo(0, history.state.scrollY);
  }
});

2. 更新历史记录时保存滚动位置
   修改page事件的处理代码，在更新URL和标题的同时，把当前的滚动位置存入history state：

ias.on('page', (e) => {
  document.title = e.title;
  // 保留原有state属性，同时添加当前滚动位置
  const newState = {
    ...history.state,
    scrollY: window.scrollY
  };
  history.replaceState(newState, e.title, e.url);
});

3. 监听浏览器前进/后退事件
   加个popstate事件监听，确保切换历史记录时能同步滚动位置：

window.addEventListener('popstate', (event) => {
  if (event.state && event.state.scrollY) {
    window.scrollTo(0, event.state.scrollY);
  }
});

注意事项 #

• 不要直接覆盖原有history.state，用展开运算符保留原有属性，避免破坏浏览器默认的历史记录状态。
• 测试前记得清浏览器缓存，确保新代码能正常加载执行。

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