页面刷新/切换时保持滚动位置问题及URL存储方案咨询

可以通过URL的**哈希（Hash）或查询参数（Query Parameter）**来存储滚动位置，避免sessionStorage跨页面共享的问题，具体实现如下：

方式一：使用URL哈希（#scrollTop=XXX） #

哈希部分不会被发送到后端，适合前端单独处理的场景。

1. 滚动时更新URL哈希 #

// 防抖处理，避免滚动时频繁更新URL
let scrollTimer;
$(window).scroll(function() {
  clearTimeout(scrollTimer);
  scrollTimer = setTimeout(() => {
    const scrollTop = $(this).scrollTop();
    window.location.hash = `scrollTop=${scrollTop}`;
  }, 100);
});

2. 页面加载时读取哈希并滚动 #

$(document).ready(function() {
  const hash = window.location.hash;
  if (hash.startsWith('#scrollTop=')) {
    const scrollTop = parseInt(hash.split('=')[1], 10);
    if (!isNaN(scrollTop)) {
      $(window).scrollTop(scrollTop);
    }
  }
});

方式二：使用URL查询参数（?scrollTop=XXX） #

查询参数会被发送到后端，适合需要后端配合或更直观的参数传递场景。

1. 跳转页面时携带滚动位置参数 #

处理页面内的跳转链接，自动拼接滚动位置参数：

$('a').on('click', function(e) {
  const targetUrl = $(this).attr('href');
  // 排除锚点链接和外部链接
  if (targetUrl && !targetUrl.startsWith('#') && targetUrl.startsWith(window.location.origin)) {
    e.preventDefault();
    const scrollTop = $(window).scrollTop();
    // 判断目标URL是否已有参数，选择拼接符
    const separator = targetUrl.includes('?') ? '&' : '?';
    const newUrl = `${targetUrl}${separator}scrollTop=${scrollTop}`;
    window.location.href = newUrl;
  }
});

2. 页面加载时读取查询参数并滚动 #

$(document).ready(function() {
  const urlParams = new URLSearchParams(window.location.search);
  const scrollTop = urlParams.get('scrollTop');
  if (scrollTop && !isNaN(parseInt(scrollTop, 10))) {
    $(window).scrollTop(parseInt(scrollTop, 10));
  }
});

注意事项 #

• 防抖处理：滚动时频繁更新URL会影响性能，建议添加100-200ms的防抖延迟。
• 链接过滤：处理跳转链接时，注意排除外部链接和锚点链接，避免不必要的参数拼接。
• 参数校验：读取参数时要判断是否为有效数字，避免非法值导致滚动异常。

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